Custom Validation using ValidationAttribute does not fire Client side validation

Question

I have created a custom validator deriving from ValidationAttribute. My undertsandng is that it will generate enough meta data for the client side script to automatically validate (using jquery.validate). The custom validator is working fine in server side. But it does not fire error message in the client side. (Other default validators like “StringLength“ are working fine in the client side too.) How do we correct it?

public class Person
{
    [Required(ErrorMessage = "First name required")]
    public string FirstName { get; set; }

    [CustomStartLetterMatch("FirstName")]
    [StringLength(5,ErrorMessage = "Must be under 5 characters")]
    public string LastName { get; set; }

    [Range(18,50,ErrorMessage="Must be between 18 and 50")]
    public int Age { get; set; }


}


public sealed class CustomStartLetterMatch : ValidationAttribute
{

    private const string _defaultErrorMessage = " First letter of '{0}' must be same as first letetr of '{1}'";
    private string _basePropertyName;

    public CustomStartLetterMatch(string basePropertyName)
        : base(_defaultErrorMessage)
    {
        _basePropertyName = basePropertyName;
    }


    //Override FormatErrorMessage Method
    public override string FormatErrorMessage(string name)
    {
        return string.Format(_defaultErrorMessage, name, _basePropertyName);
    }


    //Override IsValid
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        //Get PropertyInfo Object
        var basePropertyInfo = validationContext.ObjectType.GetProperty(_basePropertyName);
        var baseValue = (string)basePropertyInfo.GetValue(validationContext.ObjectInstance, null);
        var currentValue = (string)value;


        string firstLetterBaseValue = baseValue.Substring(0, 1);
        string firstLetterCurrentValue = currentValue.Substring(0, 1);

        //Comparision
        if (!string.Equals(firstLetterBaseValue, firstLetterCurrentValue))
        {
            var message = FormatErrorMessage(validationContext.DisplayName);
            return new ValidationResult(message);
        }

        //Default return - This means there were no validation error
        return null;
    }

}

VIEW

@model MyValidationTEST.Person

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">  </script>

@*UnObtrusive*@
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>




@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Person</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.FirstName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.LastName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Age)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Age)
        @Html.ValidationMessageFor(model => model.Age)
    </div>



    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

READING:

1. IValidatableObject in MVC3 - client side validation

2. In ASP.NET MVC3 how do you stay DRY with very similar but slightly different viewmodels?

3. http://odetocode.com/Blogs/scott/archive/2011/02/22/custom-data-annotation-validator-part-ii-client-code.aspx

4. http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html

5. ASP.NET MVC 3 client-side validation with parameters

6. How can I have a custom ValidationAttribute rendered as a 'data-val-xx' attribute on the client-side?

7. Clientside Validation in "Self Validate Model" in ASP.NET-MVC3

Answer 1

My undertsandng is that it will generate enough meta data for the client side script to automatically validate (using jquery.validate).

Your understanding is wrong. You cannot possibly expect that there's enough metadata in order to generate client validation. In this IsValid method you could do absolutely anything. You could even call an unmanaged C++ library to perform validation. You cannot possibly expect that ASP.NET MVC 3 will reflect this on the client.

You need to implement IClientValidatable and add a custom adapter if you want to enable client validation for such custom validation logic. In this adapter you have to reimplement the same logic you did on the server but using javascript this time.

Here's one example. And here's another one.

As you can see client side validation works fine with some simple rules such as Required and stuff, bit once you start doing some real validation you will have to implement it yourself.