Enabling Client Side Validation on Custom Data Annotations With IClientValidatable in MVC

In this article you will learn how to create or enable client-side validation for custom data annotations. If you go through my previous article then you will learn How to Create Custom Data Annotations to enable server-side validation. I also recorded a video for this and uploaded on YouTube. This article is a continuation of that article so go and read the article or watch the video.

So, in the last article I explained creation of custom data annotations and created a demo custom annotation by name [ExcludeChar("/.,!@#$%")], this annotation excludes all the characters typed as a parameter from the Name field/property and displays the friendly message "Name contains invalid character.".

Well, let's look at this GIF to understand how it worked.

You can see that when the user clicks on the button it displayed the message "Name contains invalid character.", so this is doing an unnecessary server round trip just to validate the Name. We can tweak and stop this server round-trip, just by a few quick codes.

Again, look at the GIF, this is what I wanted to create.

 

You can see that it works and displays the message "Name contains invalid character." immediately on typing a character. So nice.

I hope you have a working server-side validation sample here, if not then read the article or watch the video (links given above).

Let's go step-by-step from here.

Step 1: Adding IClientValidatable interface and its GetClientValidationRules method

This is exactly the same code I used in the last article, I made a few additions here that are highlighted.

class ExcludeCharAttribute : ValidationAttribute, IClientValidatable
{
    private readonly string _chars;
    public ExcludeCharAttribute(string chars)
        : base("{0} contains invalid character.")
    {
        _chars = chars;
    }
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            var valueAsString = value.ToString();
            for (int i = 0; i < _chars.Length; i++)
            {
                if (valueAsString.Contains(_chars[i]))
                {
                    var errorMessage = FormatErrorMessage(validationContext.DisplayName);
                    return new ValidationResult(errorMessage);
                }
            }
        }
        return ValidationResult.Success;
    }
    //new method
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule();
        rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
        rule.ValidationParameters.Add("chars", _chars);
        rule.ValidationType = "exclude";
        yield return rule;
    }
}

 

The code above first derives the ExcludeCharAttribute class from the base class ValidationAttribute (in short, that allows server-side validation) and IClientValidatable (to enable client-side validation).

Second, I added a new method, GetClientValidationRule. Actually, the IClientValidatable interface defines a single method GetClientValidationRules. When the MVC framework finds a validation object with this interface present, it invokes GetClientValidationRules to retrieve a sequence of ModelClientValidationRule objects. These objects carry the metadata, or the rules, the framework sends to the client.

In order to run the validation on the client-side we need a few rules to return, like what error message to display when validation fails, which character(s) to exclude/not accept with Name and an identifier for a piece of JavaScript code that can exclude the words. So, this is what the GetClientValidationRules method is returning.

Step 2: Verity the appearance of data-val attributes in markup

If you run the application here then you will see the following data-val attributes added to the markup.

 

But this is not enough to start client-side validations in action because now we have metadata on the client, but we still need to write some quick script code to dig out metadata values from data-val attributes on the client and execute the validation logic.

Step 3: Add JavaScript code in a new .js file to execute on client-side

Just go and add a new JavaScript file to the "Scripts" folder by the name "excludechar.js" and use the following code:

/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
$.validator.unobtrusive.adapters.addSingleVal("exclude", "chars");
$.validator.addMethod("exclude", function (value, element, exclude) {
    if (value) {
        for (var i = 0; i < exclude.length; i++) {
            if (jQuery.inArray(exclude[i], value) != -1) {
                return false;
            }
        }
    }
    return true;
});

The first two lines of code will do nothing but allow the benefits of IntelliSense while writing JavaScript. Alternatively, we could add these references to the "_references.js" file.

The code that is highlighted is the masterpiece code, adapter. The MVC unobtrusive validation stores all adapters in the jQuery.validator.unobtrusive.adapters object, this exposes an API for us to use in the application.

I am using the addSingleVal adapter method that retrieves a single parameter value from metadata. The first parameter is the name of the adapter and it must match the ValidationProperty value we set on the server-side rule. The second parameter is the name of the single parameter to retrieve from metadata.

Like the adapters object, the validator object has an API to add new validators. The name of the method is addMethod that takes two parameters. The first is the name of the validator and by convention it matches the name of the adapter. The second is a function to be invoked when validation occurs. The rest of the code in the addMethod does nothing but loop through all the excludable characters (/.,!@#$%) and checks its existence in "value" that is nothing but the Name entered in the TextBox.

Step 4: Adding reference on Create.cshtml and Edit.cshtml Views

If you have done all the preceding then just go and add the reference of the JavaScript file for the Views, as in the following:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/excludechar.js")
}

Keep it in mind that the excludechar.js file that we created should appear at the bottom and after the "jquery.validate.min.js" and "jquery.validate.unobtrusive.min.js" files.

 

Now run the application and enjoy client-side validation in action.
 

Hope this helps.