How To Add Dynamic Validation In Form Using Reactjs

I am using ant design in my demo application. I want to add dynamic validation of mobile number in my application. In my form there two field select field input field I want to

Solution 1:

You need to set rules as per some conditions like so:

const rules = mobileValidation
    ? [
        { required: true, message: "Please input a number!" },
        { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }
      ]
    : null;

Since you need only 10 digit number, you need to add ^ at the start and $ at the end of the regex pattern i.e. /^[2-9]{2}\d{8}$/

jsx

importReact, { useState } from"react";
import { Form, Icon, Input, Button, Select } from"antd";

const { Option } = Select;
constSearchForm = props => {
  const [mobileValidation, setMobileValidation] = useState(false);
  const [isOptionSelected, setIsOptionSelected] = useState(false);

  const { getFieldDecorator, getFieldsError } = props.form;

  consthandleSubmit = e => {
    e.preventDefault();

    mobileValidation && props.form.validateFields({ force: true });
  };
  consthandleChange = value => {
    setIsOptionSelected(true);
    setMobileValidation(value === "mobile no");
  }; 
  const rules = mobileValidation
    ? [
        { required: true, message: "Please input a number!" },
        { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }
        // { pattern: /^\d{10}$/, message: "Please input 10 digit number!" }
      ]
    : null;

  return (
    <divstyle={{height:80, display: "flex", justifyContent: "flex-end" }}><Formlayout="inline"onSubmit={handleSubmit}><Form.Item>
          {getFieldDecorator("searchBy", {
            // initialValue: this.props.transactionEditableMode ? this.props.transactionEditableModeData.from : '',
            rules: [{ required: true, message: "Please select your From!" }]
          })(
            <Selectstyle={{width:180 }}
              placeholder="Select a option"onChange={handleChange}
            >
              {[
                { text: "Caf Nos", value: "cafs" },
                { text: "mobile no", value: "mobile no" }
              ].map(i => {
                return (
                  <Optionkey={i}value={i.value}>
                    {i.text}
                  </Option>
                );
              })}
            </Select>
          )}
        </Form.Item><Form.Item>
          {getFieldDecorator("value", {
            rules
          })(
            <Inputstyle={{width:180 }}
              // prefix={<Icontype="user"style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="search a number"
              name="input"
            />
          )}
        </Form.Item><Form.Item><Buttontype="primary"htmlType="submit">
            Search
          </Button>

          {!isOptionSelected && <h3>Select an option</h3>}
        </Form.Item></Form></div>
  );
};

constWrappedSearchForm = Form.create({ name: "search_form" })(SearchForm);

exportdefaultWrappedSearchForm;

Is that what you were looking for? let me know

Side note: Read about validateFields()

Solution 2:

that worked

<Form.Item>
          {getFieldDecorator("value", {
            rules : mobileValidation ? [
                  { required: true, message: "Please input a number!" },
                  { pattern: /^[2-9]{2}\d{8}$/, message: "Please input 10 digit number!" }] : []
          })(
            <Inputstyle={{width:180 }}
              // prefix={<Icontype="user"style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="search a number"
              name="input"
            />
          )}