This is a step-by-step tutorial that will show you how to do basic form validation in . React You can and . see the full code on Github see the app running on Heroku _react-form-validation-demo - React Form Validation Demo_github.com learnetto/react-form-validation-demo We’ll use to get up and running quickly with a simple React app. create-react-app Install the package from npm and create a new app: $ npm install -g create-react-app$ create-react-app react-form-validation-demo Now let’s run the app: $ cd react-form-validation-demo/$ npm start That opens where our new app is running. http://localhost:3000/ Next, let’s add bootstrap so that we can style our form easily: $ npm install react-bootstrap — save$ npm install bootstrap@3 — save Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of the file: src/index.js import ‘bootstrap/dist/css/bootstrap.css’;import ‘bootstrap/dist/css/bootstrap-theme.css’; Ok, now let’s build the core of our demo app. Let’s add a Form component. In , let’s replace the default intro text markup with a Form component that we’re going to build. We also need to import it: src/App.js import React, { Component } from 'react';import logo from './logo.svg';import './App.css';import Form from './Form.js'; class App extends Component {render() {return (<div className="App"><div className="App-header"><img src={logo} className="App-logo" alt="logo" /><h2>React Form Validation Demo</h2></div><Form /></div>);}} export default App; Now, let’s create that Form component in src/Form.js. We’ll make a simple sign up form with email and password input fields and a submit button. import React, { Component } from ‘react’;import ‘./Form.css’; class Form extends Component {render () {return (<form className=”demoForm”><h2>Sign up</h2><div className=”form-group”><label htmlFor=”email”>Email address</label><input type=”email” className=”form-control”name=”email” /></div><div className=”form-group”><label htmlFor=”password”>Password</label><input type=”password” className=”form-control”name=”password” /></div><button type=”submit” className=”btn btn-primary”>Sign up</button></form>)}}export default Form; I’ve copied an example form from the Bootstrap docs so that it looks nice out of the box. But notice I had to change some things to make it work with JSX. and are reserved keywords in , so we have to use and instead respectively. class for JavaScript className htmlFor We also need to make sure we close all tags including the tag. input Now, let’s initialise the state in the constructor: constructor (props) {super(props);this.state = {email: '',password: ''}} We’re setting email and password to empty strings. We’ll hook up the form input fields to these state values, for email: value={this.state.email} and for password: value={this.state.password} But we’re not updating the state on user input, so if we type in the form fields now, our text won’t appear. We need an handler for the input fields: onChange onChange={this.handleUserInput} which we’ll define as: handleUserInput = (e) => {const name = e.target.name;const value = e.target.value;this.setState({[name]: value});} Ok, now let’s get to the validation. We’ll save any validation errors and the validity status of the form in the state. So let’s add couple of properties to our initial state: constructor (props) {super(props);this.state = {email: '',password: '',formErrors: {email: '', password: ''},emailValid: false,passwordValid: false,formValid: false}} We’re adding a property called which will be an object with the input field names as keys and any validation errors as their values. The initial value for each key is an empty string. formErrors We also have 3 boolean properties — , and , which we’ll use to enable or disable the form submit button, based on our validation results. We set their initial values to false.Now let’s add a new component called for displaying any errors from our validation above the form. emailValid passwordValid formValid FormErrors <div className=”panel panel-default”><FormErrors formErrors={this.state.formErrors} /></div> We’ll save it in : src/FormErrors.js import React from ‘react’; export const FormErrors = ({formErrors}) =><div className='formErrors'>{Object.keys(formErrors).map((fieldName, i) => {if(formErrors[fieldName].length > 0){return (<p key={i}>{fieldName} {formErrors[fieldName]}</p>)} else {return '';}})}</div> It’s a stateless functional component (or presentational component) which simply iterates through all the form validation errors and displays them. Now, we’ll call a validation after the user types in the field. The setState method accepts a callback function as a second argument, so let’s pass a validation function to it. handleUserInput (e) {const name = e.target.name;const value = e.target.value;this.setState({[name]: value},() => { this.validateField(name, value) });} Let’s define that: validateField(fieldName, value) {let fieldValidationErrors = this.state.formErrors;let emailValid = this.state.emailValid;let passwordValid = this.state.passwordValid; switch(fieldName) {case 'email':emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);fieldValidationErrors.email = emailValid ? '' : ' is invalid';break;case 'password':passwordValid = value.length >= 6;fieldValidationErrors.password = passwordValid ? '': ' is too short';break;default:break;}this.setState({formErrors: fieldValidationErrors,emailValid: emailValid,passwordValid: passwordValid}, this.validateForm);} validateForm() {this.setState({formValid: this.state.emailValid &&this.state.passwordValid});} We do two different checks for the input fields. For the email field, we check it against a regular expression to see if it’s an email. Note: I’m using an example regex from the Devise library. Checking for emails with a regex is very complex, but this simple regex will do for our toy app. For the password field, we check if the length is a minimum of 6 characters or not. When the field doesn’t pass the check, we set an error message for it and set its validity to false. Then we call to update the and the field validity and we pass the callback to set the value of . setState formErrors validateForm formValid Let’s set the disabled attribute of the submit button based on the value of the state property. formValid <button type="submit" className="btn btn-primary"disabled={!this.state.formValid}>Sign up</button> So with that, our basic form validation works. We can add one little enhancement by highlighting the input fields when they have an error. We’ll add the bootstrap class to a field’s form-group based on its error value: has-error <div className={`form-group${this.errorClass(this.state.formErrors.email)}`}> is a method we can define as: errorClass errorClass(error) {return(error.length === 0 ? '' : 'has-error');} Now when a field has an error, it has a red border around it. And thats’ all for this tutorial. You can and . see the full code on Github the demo app running on Heroku This is a very simple example. We have hard-coded field names in our validation code, which is not ideal or scalable. We can also only have one validation per field, which is also not practical. But we can generalise it to handle any number of fields with multiple errors. There are many libraries available for form validations, but before you start using them, it’s good to think about how you’d implement the functionality yourself. This tutorial is an excerpt form Module 6 of , in which I cover form validations in a lot more depth. . The FREE Complete React on Rails Course Check it out _PRE-ORDERS ARE OPEN! This course is open for pre-orders. The first 6 modules are live. New lessons will be published…_learnetto.com The Complete React on Rails 5 Course Originally published at learnetto.com .
