Using Kendo validator with MVC

Kendo validator is very much useful in client-side validation and displaying error message to the user. If you are using ASP.NET MVC, then you can also take benifit of Data Annotation to validate any input field and showing custom validation message.

While we are sending form data to surver side, mainly we follow any of these two methods -

1. Submitting the complete form.
2. Using ajax 'POST' method and sending the form data to the desired action method.

In this article, I will be discussing how you can take advantage of kendo validator and data-annotation attributes for client-side validation.

First, let me give an overview of my ViewModel class and View code -

The above image shows a part of my view-model class. As you can see, I am using data-annotation attributes to define if the field is required and what should be the error message that will be displayed to the user if the validation fails.

Ok, let us now move forward and have a look at the html (cshtml) code.

The upper image shows my cshtml code (again a selected part – I am showing the code only for the required fields). This cshtml is using the View-model class (that is shown earlier) and I am defining a seaparate div (with class 'validation-error-message' – which is my custom class) to display the custom error message that I have defined in the "ErrorMessage" section of the view-model class.

Using this separate div is not mandatory, I am using this to avoid any formatting issues.

You must have references to kendo.default.min.css, jquery.min.js, kendo.all.min.js in the View as per the order.

Now, let us move into the two above mentioned cases -

Complete form post to the action -

In this case, we will have a submit button to post the form data. Call your JavaScript function for validation on click of the submit button. Like -

<input type = "submit"  id = "btnSubmit"  value = "Submit" onclick = "ValidateInputFields();">

Your function for validation should contain the following code -

function ValidateInputFields() {

     $('#formID').kendoValidator();

}

Or, you can bind the 'submit' event with the button -

$('#btnSubmit').bind('submit', function() {

     $('#formID').kendoValidator();

});

And you are done. Obviously, if the input field validation fails, the form does not get posted.

AJAX 'POST' method to post form data to action method -

In this case, there won't be a complete form post and we need to manually restrict the form posting to the action method if the input field validation fails, so, our approach will change a bit.

Unlike previous case, in this case, on button click, we can directly call our function for the ajax call to post form data and check for validation before doing the post operation.

<input type = "button"  value = "submit"  onclick = "PostFormData();">

In the PostFormData function -

function PostFormData() {

     var validator = $('#formID').kendoValidator().data('kendoValidator');

     

     // Check for input field validation
     if (validator.validate()) {

           // Your code for ajax call

     }

}

At the end, when user clicks the submit button and the input fields fail validation rules, the validation message is displayed to the user -

So, using kendoValidator, we can implement client-side validation easily – with less amount of code and can get a beautiful UI to display error message to the user.