How to implement Validation on Antd field before submitting the form

user_15381734 0
Viewed 512

How to Check the Email filed is valid when you enter your text in input field. i want to change border color when the field is valid before submitting the form. I have implemented with className getFieldError but its not working

  <Form.Item
          validateTrigger="onBlur"
          name="Email"
          label="E-mail Address"
          
          rules={[
            {
              type: "email",
              message: "The input is not valid E-mail!",
            },
            {
              required: true,
              message: "Please input your E-mail!",
            },
            {
              min: 5,
              message: "'Email' must be between 5 and 255 characters.",
            },
          ]}
        >
          
          <Input className={`${(form.getFieldError('Email').length == 0 && form.getFieldValue('Email') != undefined)  ? 'field-border' : ''}`}   disabled={!isAdmin}  />
        </Form.Item>
antd reactjs validation forms css
2 Answers

If you are using react js I would like to prefer react-hook-form. It is very easy to and provides multiple ways to implement validations but it only works for the functional component if you want to use advanced forms like react-hook-form in class-based component I would recommend you formik form.

user_149055940

Seems like the validations will apply when input is focused out. So one way to do is to create onBlur event on input

EmailChange = () => {
  if (form.getFieldError('Email')?.length == 0 ){
       e.target.classList.add('field-border');
   }
}

          <Input onBlur={EmailChange} disabled={!isAdmin}  />
user_61248470
Related