Multiple field validations on client side

Linked Projects:

Calreact
 
Lesson code - https://github.com/learnetto/calreact/tree/m6l7-generalised-validations

In the last lesson we added client side validation for the title field.  If the title field value is less than 3 characters long, the form submit button is disabled. As soon as we type 3 characters in the field, the submit button gets enabled.

However, we didn’t add any validation for the appointment time field.

So, as long as we fill in a valid title, we can submit the form even we haven’t filled in a date or if we we have an invalid date. 

So if I submit the form now, we’ll get an error saying, appt_time can’t be blank but we’re still making a round trip to the server to find that out.

[screenshot of that error message; 0:34]

So now let’s do the validation for the appt_time on the client side.

Go to our Appointments component and in the validateForm method, inside this.setState, let’s add another condition for checking the form validity.

validateForm () {
  this.setState({formValid: this.state.title.trim().length > 2 &&
                            this.state.appt_time})
}

To check the validity of appt_time, we can use the moment library’s method isValid().  So let’s wrap this in moment() and then call isValid().

validateForm () {
  this.setState({formValid: this.state.title.trim().length > 2 &&
                            moment(this.state.appt_time).isValid()})
}

That’ll tell us if this value is a valid datetime or not.

Before we can use this, we need to import moment so let’s do that at the top of the file.

import moment from ‘moment’;

Let’s also change the initial state values for the form. Let’s set the title to an empty string and formValid to false.

constructor (props, railsContext) {
  super(props)
  this.state = {
    appointments: this.props.appointments,
    title: '',
    appt_time: '',
    formErrors: {},
    formValid: false
  }
}

Now let’s refresh the page and enter a title.

Entering a valid title is not enough to validate the form. The button remains disabled but if I select a date, it gets enabled. So now I can submit the form and create and an appointment. But if you remember in the previous lesson, when we did the validation on the server, in the appointment model file, we didn’t just check for the presence of appt_time, we also checked to make sure that its value is not in the past.

So now let’s add that second check on the client side.

Let’s add another condition to validateForm using the isAfter() method from the moment library.

validateForm () {
  this.setState({formValid: this.state.title.trim().length > 2 &&
                            moment(this.state.appt_time).isValid() &&
                            moment(this.state.appt_time).isAfter()})
}

The isAfter method checks if a given datetime value is after a specific value, which you can pass inside the brackets. If we don’t pass it a value, it uses the current moment by default. So this is just checking if the selected appt_time is after the current moment.

If I go back to the browser and choose a date before today’s date, the button becomes disabled because it doesn't pass the second validity test.

Now both the form field values are being checked on the client so that the user can fix any obvious issues before submitting the form.

Liked this tutorial? Get more like this in your inbox