Validation in React.js

To enable validation rules for different form control use the YUP package for e.g., if your form has two fields like username and password you can write the following code to set up validation

const = initial state = {
	username: "", 
	password : "" 
};

import yup frmm 'yup';

const user = yup.object().shape ({
	username :  yup.string().required(), 
	password : yup.string().required{)`
});

The next part of this article we will discuss form validation using the Formik package. The Formik package needs a parent root comnponent. So we write <Fragment> element.

The Formik component has three props

1. initialValues:- This stores the initial state of the form
2. onSubmit - This handles the submit event
3. validationSchema - This stores the validation used written by yup.

The properties are:-

1. props.errors.<form_field_name>
2. props.touched.<form_field_name>
3. props.values.<form_field_name>
4. props.dirty.<form_field_name>
5. props.isSubmitting.<form_field_name>
6. props.reset.<form_field_name>
7. props.initialValue.<form_field_name>

For example, if the user has not entered the username and clicked on submit button then the props.error.username will return true and the validation text will be stored in props.error.username. It checks the props.error.username.

How to write a validation error in YUP.

User name: yup.string().required("user name is required");

Pattern matching Pincode=/^d{6}$/;

Pincode: yup.string().required("pin code is required").matches(Pincode,"pin code is invalid");

How to write arrow functions in HTML event listener e.g. <label for="single" OnClick={ (e) => this.function_call(e)}>

The following is the example of validation of field. Defind a field component with the following attribute

1. Component = select
2. Name = religion
3. Class = form control

To check if the user has filled the value of religion, type the following code.

{props.values.religion=="" && props.touched.religion}

Here you will understand how to insert images in render function. <img src={require("url")} alt="test" / >

You can also send function as props

Example:

render() {
    const initialState = {
      username: "",
      password: ""
    };

    const userSchema = yup.object().shape({
      username: yup.string().required("username is required"),
      password: yup.string().required("password is required")
    });

  return (
	<div className="search-container">
	  <Fragment>
		<Formik
		  initialValues={initialState}
		  onSubmit={(values, actions) => {
			console.log(values);
		  }}
		  validationSchema={userSchema}
		>
		  {props => (
			<form className="form">
			  {
				(props.reset = values => {
				  props.resetForm(values);
				  this.setState({ startDate: new Date() });
				  $("#close-sa").click();
				})
			  }
			 <Field
				component="input"
				onChange={props.handleChangeInput}
				name="username"
				value={props.values.username}
				placeholder="Username"
				className="form-control shadow"
				id="username"
			  />
			  {props.errors.username && props.touched.username ? (
				<span className="error">
				  {props.errors.username}
				</span>
			  ) : (
				""
			  )}
			  <br />
			  <br />
			   <Field
				component="input"
				onChange={props.handleChangePassword}
				name="password"
				value={props.values.password}
				placeholder="Password"
				className="form-control shadow"
				id="password"
			  />
			  {props.errors.password && props.touched.password ? (
				<span className="error">
				  {props.errors.password}
				</span>
			  ) : (
				""
			  )}
			  <br />
			  <br />
			  <div className="col-button-set">
				<button
				  className="w-100 btn btn-primary-outline"
				  type="button"

				  onClick={e => props.reset(props.initialValues)}
				>
				  Cancel
				</button>
                
				<button
				  onClick={e =>
					this.setAppointment(
					  props.values.username,
					  props.values.password
					)
				  }
				  type="button"
				  disabled={!props.dirty && !props.isSubmitting}
				  className="w-100 btn btn-primary"
				>
				  Submit
				</button>
			  </div>
			</form>
		  )}
		</Formik>
	  </Fragment>
	</div>
  );
}  

Explanation

In the above example, we have created twi elements one for username and one for password

The Field tag the following props:-

1. component - what is the type of n[put control (for eg, textarea,select,input ,etc.)
2. The name attributeb of the resulting form-control
3. Any ebent listenersisf any
4. id and class attributes
5. avlue attribute
6. placeholder attribute

After defining the fields using Field tag , we then validates using the default properties of each form element identified by the name componnet of the form field.

So props.errrors.username will return true if then if it is empty and the Formik form is submitted it will return false and the form will not be submitted and the error message will be the one describded in yup i.e., "username is required" the condition in yup returns false. So, since we have set yup.string().required("username is required"), this error message will be shown