how to provide validations for react js form

Question

How to provide validations for react js form.

I have taken form with two fields. if two fields are enabled then only need to enable save button.

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const FormExampleForm = () => (
  <Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder='First Name' />
    </Form.Field>
    <Form.Field>
      <label>Last Name</label>
      <input placeholder='Last Name' />
    </Form.Field>
    <Form.Field>
      <Checkbox label='I agree to the Terms and Conditions' />
    </Form.Field>
    <Button type='submit'>Submit</Button>
  </Form>
)

export default FormExampleForm

Answer 1

In redux forms 6.7 there's a simple property called pristine which can be used to do this. But if the user enters some value in at least one input field the submit button gets activated. To achieve that you may need to do something like this.

  render() {
    // const { handleSubmit } = this.props;
    const {handleSubmit, pristine, reset, submitting} = this.props
    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <div>
            <label>First Name</label>
            <div>
              <Field name="firstName" component="input" type="text" placeholder="First Name"/>
            </div>
        </div>
      <button type="submit" className="btn btn-primary" disabled={pristine || submitting}>Submit</button>
      </form>
    );
  }
}

But if you need to enable submit button, say when the user inputs values in 2 given fields or so, then this becomes complex. You need to do something like this. Here's my sample usecase. The form has 3 fields firstName, lastName and age. The submit button gets activated only if the user enters values for firstName and lastName input fields here. Please check out the following code.

import React, { Component } from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

class UserNew extends Component {
  constructor(props) {
    super(props);
    this.isSubmitEnabled = this.isSubmitEnabled.bind(this);
  }


  onSubmit(values) {
    console.log(values);
  }

  isSubmitEnabled() {
   // Access field values here and validate them
   const firstName = this.props.firstNameValue;
   const lastName = this.props.lastNameValue;
   if(firstName && lastName){
      return true;
   }
   return false;
 }

  render() {
    const { handleSubmit } = this.props;
    const isEnabled = this.isSubmitEnabled();


    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Age</label>
        <div>
          <Field name="age" component="input" type="text" />
        </div>
      </div>
      <button type="submit" className="btn btn-primary" disabled={!isEnabled}>Submit</button>
      </form>
    );
  }
}


UserNew = reduxForm({
  form: 'UserNewForm'
})(
  UserNew
);

// Decorate with connect to read form values
const selector = formValueSelector('UserNewForm') // <-- same as form name
UserNew = connect(state => {
  const firstNameValue = selector(state, 'firstName')
  const lastNameValue = selector(state, 'lastName')
  return {
    firstNameValue,
    lastNameValue,
  }
})(UserNew)


export default UserNew;

To access field values you need to use formValueSelector in ReduxForms. For that you need to connect your form to redux store using connect helper.

Hope this helps. Happy coding !

Answer 2

Either you can use Redux-form as its not used in above code, so you can write custom JS validation code. For this you need to follow below

1. Initialise state in

   contructor(){
    this.state{
      first_name: null,
      last_name: null,
    }
   }
   

2. Change state of every input element onChange onChange={()=>this.setState({first_name: event.target.value})}

3. Now add onClick property to <Button onClick={this.handleSubmit} />

4. inside handleSubmit() you can get values through local state of component and add validation rules like

   if(this.state.first_name =="") { console.log("Enter first name") }