Reactjs - form input validation

Question

The form of my contact page is as follows:

<form name="contactform" onSubmit={this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name"/> <br/> <input refs="email" type="text" size="30" placeholder="Email"/> <br/> <input refs="phone" type="text" size="30" placeholder="Phone"/> <br/> <input refs="address" type="text" size="30" placeholder="Address"/> <br/> </fieldset> </div> <div className="col-md-6"> <fieldset> <textarea refs="message" cols="40" rows="20" className="comments" placeholder="Message"/> </fieldset> </div> <div className="col-md-12"> <fieldset> <button className="btn btn-lg pro" id="submit" value="Submit">Send Message</button> </fieldset> </div> </form> 

You must add confirmation for all fields. Can someone help me add confirmation to this reactive form?

Answer 1

You should avoid using links; you can do this with the onChange function.

With each change, update the state of the changed field.

Then you can easily check if this field is empty or something else you want.

You can do something as follows:

 class Test extends React.Component { constructor(props){ super(props); this.state = { fields: {}, errors: {} } } handleValidation(){ let fields = this.state.fields; let errors = {}; let formIsValid = true; //Name if(!fields["name"]){ formIsValid = false; errors["name"] = "Cannot be empty"; } if(typeof fields["name"] !== "undefined"){ if(!fields["name"].match(/^[a-zA-Z]+$/)){ formIsValid = false; errors["name"] = "Only letters"; } } //Email if(!fields["email"]){ formIsValid = false; errors["email"] = "Cannot be empty"; } if(typeof fields["email"] !== "undefined"){ let lastAtPos = fields["email"].lastIndexOf('@'); let lastDotPos = fields["email"].lastIndexOf('.'); if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) { formIsValid = false; errors["email"] = "Email is not valid"; } } this.setState({errors: errors}); return formIsValid; } contactSubmit(e){ e.preventDefault(); if(this.handleValidation()){ alert("Form submitted"); }else{ alert("Form has errors.") } } handleChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); } render(){ return ( <div> <form name="contactform" className="contactform" onSubmit= {this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name" onChange={this.handleChange.bind(this, "name")} value={this.state.fields["name"]}/> <span style={{color: "red"}}>{this.state.errors["name"]}</span> <br/> <input refs="email" type="text" size="30" placeholder="Email" onChange={this.handleChange.bind(this, "email")} value={this.state.fields["email"]}/> <span style={{color: "red"}}>{this.state.errors["email"]}</span> <br/> <input refs="phone" type="text" size="30" placeholder="Phone" onChange={this.handleChange.bind(this, "phone")} value={this.state.fields["phone"]}/> <br/> <input refs="address" type="text" size="30" placeholder="Address" onChange={this.handleChange.bind(this, "address")} value={this.state.fields["address"]}/> <br/> </fieldset> </div> </form> </div> ) } } React.render(<Test />, document.getElementById('container')); 

In this example, I did the check only for email and name, but you have an idea how to do this. Otherwise, you can do it yourself.

There may be a better way, but you will understand the idea.

Here is the fiddle.

Hope this helps.

Answer 2

I took your code and adapted it using the library to respond to the form with restrictions : https://codepen.io/tkrotoff/pen/LLraZp

 const { FormWithConstraints, FieldFeedbacks, FieldFeedback } = ReactFormWithConstraints; class Form extends React.Component { handleChange = e => { this.form.validateFields(e.target); } contactSubmit = e => { e.preventDefault(); this.form.validateFields(); if (!this.form.isValid()) { console.log('form is invalid: do not submit'); } else { console.log('form is valid: submit'); } } render() { return ( <FormWithConstraints ref={form => this.form = form} onSubmit={this.contactSubmit} noValidate> <div className="col-md-6"> <input name="name" size="30" placeholder="Name" required onChange={this.handleChange} className="form-control" /> <FieldFeedbacks for="name"> <FieldFeedback when="*" /> </FieldFeedbacks> <input type="email" name="email" size="30" placeholder="Email" required onChange={this.handleChange} className="form-control" /> <FieldFeedbacks for="email"> <FieldFeedback when="*" /> </FieldFeedbacks> <input name="phone" size="30" placeholder="Phone" required onChange={this.handleChange} className="form-control" /> <FieldFeedbacks for="phone"> <FieldFeedback when="*" /> </FieldFeedbacks> <input name="address" size="30" placeholder="Address" required onChange={this.handleChange} className="form-control" /> <FieldFeedbacks for="address"> <FieldFeedback when="*" /> </FieldFeedbacks> </div> <div className="col-md-6"> <textarea name="comments" cols="40" rows="20" placeholder="Message" required minLength={5} maxLength={50} onChange={this.handleChange} className="form-control" /> <FieldFeedbacks for="comments"> <FieldFeedback when="*" /> </FieldFeedbacks> </div> <div className="col-md-12"> <button className="btn btn-lg btn-primary">Send Message</button> </div> </FormWithConstraints> ); } } 

Screenshot:

This is a quick hack. For a proper demo, check out https://github.com/tkrotoff/react-form-with-constraints#examples

Answer 3

 import React from 'react'; import {sendFormData} from '../services/'; class Signup extends React.Component{ constructor(props){ super(props); this.state = { isDisabled:true } this.submitForm = this.submitForm.bind(this); } validateEmail(email){ const pattern = /[a-zA-Z0-9]+[\.]?([a-zA-Z0-9]+)?[\@][az]{3,9}[\.][az]{2,5}/g; const result = pattern.test(email); if(result===true){ this.setState({ emailError:false, email:email }) } else{ this.setState({ emailError:true }) } } handleChange(e){ const target = e.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); if(e.target.name==='firstname'){ if(e.target.value==='' || e.target.value===null ){ this.setState({ firstnameError:true }) } else { this.setState({ firstnameError:false, firstName:e.target.value }) } } if(e.target.name==='lastname'){ if(e.target.value==='' || e.target.value===null){ this.setState({ lastnameError:true }) } else { this.setState({ lastnameError:false, lastName:e.target.value }) } } if(e.target.name==='email'){ this.validateEmail(e.target.value); } if(e.target.name==='password'){ if(e.target.value==='' || e.target.value===null){ this.setState({ passwordError:true }) } else { this.setState({ passwordError:false, password:e.target.value }) } } if(this.state.firstnameError===false && this.state.lastnameError===false && this.state.emailError===false && this.state.passwordError===false){ this.setState({ isDisabled:false }) } } submitForm(e){ e.preventDefault(); const data = { firstName: this.state.firstName, lastName: this.state.lastName, email: this.state.email, password: this.state.password } sendFormData(data).then(res=>{ if(res.status===200){ alert(res.data); this.props.history.push('/'); }else{ } }); } render(){ return( <div className="container"> <div className="card card-login mx-auto mt-5"> <div className="card-header">Register here</div> <div className="card-body"> <form id="signup-form"> <div className="form-group"> <div className="form-label-group"> <input type="text" id="firstname" name="firstname" className="form-control" placeholder="Enter firstname" onChange={(e)=>{this.handleChange(e)}} /> <label htmlFor="firstname">firstname</label> {this.state.firstnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''} </div> </div> <div className="form-group"> <div className="form-label-group"> <input type="text" id="lastname" name="lastname" className="form-control" placeholder="Enter lastname" onChange={(e)=>{this.handleChange(e)}} /> <label htmlFor="lastname">lastname</label> {this.state.lastnameError ? <span style={{color: "red"}}>Please Enter some value</span> : ''} </div> </div> <div className="form-group"> <div className="form-label-group"> <input type="email" id="email" name="email" className="form-control" placeholder="Enter your email" onChange={(e)=>{this.handleChange(e)}} /> <label htmlFor="email">email</label> {this.state.emailError ? <span style={{color: "red"}}>Please Enter valid email address</span> : ''} </div> </div> <div className="form-group"> <div className="form-label-group"> <input type="password" id="password" name="password" className="form-control" placeholder="Password" onChange={(e)=>{this.handleChange(e)}} /> <label htmlFor="password">Password</label> {this.state.passwordError ? <span style={{color: "red"}}>Please enter some value</span> : ''} </div> </div> <button className="btn btn-primary btn-block" disabled={this.state.isDisabled} onClick={this.submitForm}>Signup</button> </form> </div> </div> </div> ); } } export default Signup; 

Answer 4

Perhaps it will be too late for you to answer - if you do not want to change your current code much and still have a similar verification code throughout the project, you can try this too - https://github.com/vishalvisd/react-validator .

Answer 5

With React Hook, the form becomes very simple (React Hook Form: https://github.com/bluebill1049/react-hook-form )

I reused your HTML markup.

 import React from "react"; import useForm from 'react-hook-form'; function Test() { const { useForm, register } = useForm(); const contactSubmit = data => { console.log(data); }; return ( <form name="contactform" onSubmit={contactSubmit}> <div className="col-md-6"> <fieldset> <input name="name" type="text" size="30" placeholder="Name" ref={register} /> <br /> <input name="email" type="text" size="30" placeholder="Email" ref={register} /> <br /> <input name="phone" type="text" size="30" placeholder="Phone" ref={register} /> <br /> <input name="address" type="text" size="30" placeholder="Address" ref={register} /> <br /> </fieldset> </div> <div className="col-md-6"> <fieldset> <textarea name="message" cols="40" rows="20" className="comments" placeholder="Message" ref={register} /> </fieldset> </div> <div className="col-md-12"> <fieldset> <button className="btn btn-lg pro" id="submit" value="Submit"> Send Message </button> </fieldset> </div> </form> ); } 

Answer 6

A cleaner way is to use the joi-browser package. In a state, you should have an error object that includes all errors in the form. Initially, it should be installed on an empty object. Create a schema;

 import Joi from "joi-browser"; schema = { username: Joi.string() .required() .label("Username") .email(), password: Joi.string() .required() .label("Password") .min(8) .regex(/^(?=.*\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9]).{8,1024}$/) //special/number/capital }; 

Then check the form using the diagram:

 validate = () => { const options = { abortEarly: false }; const result = Joi.validate(this.state.data, this.schema, options); console.log(data) // always analyze your data if (!result.error) return null; const errors = {}; for (let item of result.error.details) errors[item.path[0]] = item.message; //in details array, there are 2 properties,path and message.path is the name of the input, message is the error message for that input. return errors; }; 

Before submitting the form, check the form:

 handleSubmit = e => { e.preventDefault(); const errors = this.validate(); //will return an object console.log(errors); this.setState({ errors: errors || {} }); //in line 9 if we return {}, we dont need {} here if (errors) return; //so we dont need to call the server alert("success"); //if there is no error call the server this.dosubmit(); }; 

Answer 7

The easiest way is to use response-validate-from

Installation

 npm install react-validate-form 

Remember to import the 'response-validate-form'

 import Validate from 'react-validate-form' 

Main use

 <Validate> {({ validate, errorMessages }) => ( <input onChange={validate} name="first" required /> <p>{errorMessages.first[0]}</p> )} </Validate> 

More information can be found at: https://github.com/lonelyplanet/react-validate-form