Validating user input using the built-in Validator

Validating user-input data is one of the common tasks in any project. A client-side validation includes checking the form-input data for the type or for the missing data. This is not to say that the server-side validation is not important. However, a client-side validation takes care of performing basic validations and shows error or validation messages before submitting the form data to a server for processing. Therefore, it provides instant feedback to the user and improves the overall user experience.

With the advent of HTML5, the input fields in a form can have types defined for it. For example, an input field that should accept only an e-mail address can be specified as type=email. Similarly, the input fields can have types such as URL, NUMBER, RANGE, DATE, SEARCH, and COLOR. When the user specifies incorrect data for any of these fields, the browser will show an appropriate validation message. In addition to the types, the form elements can also be marked as required by adding an additional attribute, required, to the input elements. However, some of the old browsers don't support HTML5 features, including the previously mentioned form validation. The Kendo UI library comes with a built-in validator that can be used to perform client-side validations.

The Kendo UI validator encourages users to use HTML5-like syntax and provides out-of-the-box support to make the form validation work on older browsers.

How to do it…

Let's take a look at an example where in one input, the text field is marked as required, and the other input field of the email type is also marked as required. Please note that this is very much an HTML5 syntax and the user doesn't have to alter the markup to mark the fields as required or of a different type:

<form id="testView">
  
  <label for="firstName">First Name</label>
  <input id="firstName"
    name="First Name"
    type="text" 
    required
    validationMessage="Please specify First Name">

  <br>

  <label for="emailId">Email Address</label>
  <input id="emailId"
    name="Email Address"
    type="email" 
    required
    data-required-msg="Please specify Email Address"
    data-email-msg="Email format is not correct">
  <br>

  <input type="submit">
</form>

In the preceding markup, the input fields are marked as required and validation messages are defined in data- attributes. After specifying the validation messages in the markup, the last step is to attach the kendo validator to the form. This is attained by executing the following code snippet:

$("form#testView").kendoValidator();

In the previous code snippet, the form element is marked for validation by calling the kendoValidator function on the same.

How it works…

In the previous markup, the firstName field is of the text type and is marked as required by adding the required attribute. Also, a validationMessage attribute that specifies the validation message to show when the user doesn't provide any input data is mentioned. The next input element, emailId, is of the email type and is marked as required as well. In this case, there are two rules that are applicable; firstly, the field is required, and secondly, the user should enter a valid e-mail address. Therefore, we need to specify two validation messages for the input field. Here, the data-required-msg and data-email-msg attributes are specified. When the user doesn't specify any value, the validation message specified in data-required-msg is displayed. Also, when the user specifies an invalid e-mail address, the validation message specified in data-email-msg is displayed.

Now, let's see this in action; when the user doesn't specify values for both the fields, then the required validation message would be shown as follows:

When the user clicks on the Submit button, the validator runs, inspects the input data, and shows the validation message if there is no data specified. Now, when the user keys in an invalid value in the e-mail field, the validation message specified in data-email-msg would be shown as follows:

Here, both the fields have some data in place and hence, the required field validation has passed. However, the e-mail address is not valid and, hence, you see the corresponding validation message being shown.

Note

By default, the field is validated when it loses focus. This is called the onBlur event. This can be disabled by passing the validateOnBlur: false option to the kendoValidator method:

 $("form#testView").kendoValidator({
  validateOnBlur: false
 });

There's more…

In the previous example, we saw that the validation message was specified in the markup. It is also possible to configure the validator so that the same message is applicable to all fields with a specific validation rule. For example, all required fields can have the same validation message, such as This field is required.

The messages configuration option can be used to set the various validation messages that can be applied across all the input elements, as shown in the following code snippet:

$("form#testView").kendoValidator({
    messages: {
    // {0} would be replaced with the input element's name
    required: '{0} is required'
    
    email: 'Enter a valid email address'
  }
});

Here, the validation messages are removed from the markup and the same is specified in the kendoValidator method. Note the use of {0} in the validation message for the required fields. Here {0} is replaced with the input element's name. For example, if the first name is not specified, the message would be First Name is required.

Similarly, in the case of fields of the email type, the Enter a valid email address validation message is shown if the user doesn't provide a valid e-mail address.

In a case where the validation message is specified in the markup as well as in the kendoValidator method as options, the message specified in the markup would take precedence.

It is also possible to define custom validation rules in addition to the standard set of validation rules mentioned previously. This is done by passing the rules option to the kendoValidator method. Let's consider the same example form that contains two input fields, namely firstName and emailId.

Now, let's add a custom rule that doesn't allow numbers to be entered in these fields:

$("form#testView").kendoValidator({
  
  rules: {
    customRule1: function(input) {
      var re = /^[A-Za-z]+$/;
      return re.test(input.val());
    }
  },
  messages: {
    customRule1: 'Numbers are not allowed'
  }
});

In the preceding code snippet, a custom rule, customRule1, is defined. When the form is being validated, all input fields are checked against this custom rule. Here, a regular expression is used to test whether the value of the input element contains a numeric value. If this returns false, then the validation message (defined under the messages object) Numbers are not allowed is displayed.

As highlighted in the preceding screenshot, the validation message is shown as the user has entered alphanumeric characters.