在反应中显示最小和最大长度表单验证错误？

Question

我正在使用下面的包动态生成表单：

https://www.npmjs.com/package/react-formio

我使用这个 link https://codesandbox.io/s/cra-react-formio-iy8lz

生成了一个简单的登录表单

构建后，它会创建一个 JSON。然后，我使用 JSON.

生成一个表单

https://codesandbox.io/s/quirky-chatelet-5ujhj

我想显示自定义消息，例如 required field 和 min length error message 以及 max length error message

ReactDOM.render(
  <Form
    src={{
      display: "form",
      components: [
        {
          label: "Name",
          validate: {
            required: true,
            json: {
              if: [
                {
                  "===": [
                    {
                      var: "data.name"
                    },
                    ""
                  ]
                },
                true,
                "required!"
              ]
            },
            minLength: 5,
            maxLength: 15
          },
          key: "name",
          type: "textfield",
          input: true
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          //  disableOnInvalid: true,
          input: true
        }
      ]
    }}
    options={{ noAlerts: true }}
    onSubmit={i => {
      alert(JSON.stringify(i.data));
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);

Answer 1

我认为您可以在 react-formio 中编写自定义验证方法，而不是使用 JSON 逻辑。根据条件，您可以在何处添加逻辑。代码：

import React from "react";
import ReactDOM from "react-dom";
import { FormBuilder } from "react-formio";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <FormBuilder
        form={{
          components: [
            {
              input: true,
              tableView: true,
              inputType: "text",
              inputMask: "",
              label: "First Name",
              key: "firstName",
              placeholder: "Enter your first name",
              prefix: "",
              suffix: "",
              multiple: false,
              defaultValue: "",
              protected: false,
              unique: false,
              persistent: true,
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                pattern: "",
                custom: "valid =  (input.length< 5)  ? 'Your input must be greater than 5':(input.length> 20) ? \n\"Your input must be less than 20\" \n : true;", //Your custom logic code
                customPrivate: false
              },
              conditional: {
                show: false,
                when: null,
                eq: ""
              },
              type: "textfield"
            },
            {
              input: true,
              tableView: true,
              label: "Message",
              key: "message",
              placeholder: "What do you think?",
              prefix: "",
              suffix: "",
              rows: 3,
              multiple: false,
              defaultValue: "",
              protected: false,
              persistent: true,
              validate: {
                required: false,
                minLength: "",
                maxLength: "",
                pattern: "",
                custom: ""
              },
              type: "textarea",
              conditional: {
                show: false,
                when: null,
                eq: ""
              }
            },
            {
              type: "button",
              theme: "primary",
              disableOnInvalid: true,
              action: "submit",
              block: false,
              rightIcon: "",
              leftIcon: "",
              size: "md",
              key: "submit",
              tableView: false,
              label: "Submit",
              input: true
            }
          ],
          display: "form"
        }}
        onChange={schema => console.log(schema)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是演示：https://codesandbox.io/s/cra-react-formio-niq10

我宁愿建议不要创建自己的表单，而是从那里的服务器创建，它应该很容易即插即用。像这样添加 JSON 有可能会出错。

Answer 2

几个建议。

您应该使用 form 属性而不是 src 属性。虽然发布的代码语法正确，但 codesandbox 仍然使用。

<FormBuilder
        src={{}} />

如@ShubhamVerma 所述，您应该使用自定义 javascript 验证。

此外，由于这是您提出的关于 formio 的第二个问题，我不确定您是如何创建 JSON 的。

您应该转到组件的验证选项卡，您可以看到可用的不同选项，您可以随意使用。在您的情况下，您可以在自定义验证部分输入验证脚本。该部分还描述了所有可供访问的变量。

if (input.length === 0){
  valid = "You should enter something";
}
else{
  if(input.length < 3){
    valid = `Min length is 3`;
  }else if (input.length > 15){
    valid  = `Max length is 15`
  }else{
    valid = true
  }
}

另请注意，您可能必须覆盖 css 才能显示表单错误占位符。看起来 bootstrap 正在将其设置为 display:none.

styles.css

.formio-errors.invalid-feedback {
  display: block;
}

Demo

如果无法从 codesandbox 嵌入式浏览器打开表单自定义选项卡，请尝试在新的 window.

中打开

................................................ ..................................................... .....................

https://iy8lz.csb.app/

在反应中显示最小和最大长度表单验证错误？

show min and max length form validation error in react?

javascript

forms

reactjs

formio