Question

In VS2010 and ASP.NET MVC 2, it seems that client-side validation (JQuery Futures or the stock option) doesn’t quite work as advertised.

I’m noticing that “tabbing off” a validated element will not invoke the client-side validation as promised. For a required field, you have to tab into the element, enter something, then remove it completely, in order to trigger the required validation. That’s not really what I’m after here, and I’m hoping it’s just a configuration issue on my side.

How do I get the validation effects from previous versions so that a previous value isn’t necessary (without having to modify the client-side scripts if possible)?

For those that asked here is a bit of a sample of what I’m doing on the client-side.

 <div>
    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm("Signup", "Home", new { area = "Admin" }, FormMethod.Post, new { id = "create_account_form", action = "#" })) { %>
        <fieldset>
            <div>
                <table>
                     <tr>
                        <td><label for="Email"> Email</label></td>
                        <td><%= Html.TextBoxFor(m => m.Email, new { name = "Email", @class = "textfield" }) %></td>
                        <td colspan="2"><p class="hint"><%= Html.ValidationMessageFor(m => m.Email)%></p></td>
                    </tr>
                    <tr>
                        <td><label for="Company"> Company</label></td>
                        <td><%= Html.TextBoxFor(m => m.Company, new { name = "Company", @class = "textfield" })%></td>
                        <td colspan="2"><p class="hint"><%= Html.ValidationMessageFor(m => m.Company)%></p></td>
                    </tr>
                </table>
            </div>
        </fieldset>
    <% } %>     

Answer 1

I can confirm that it does work when ‘tabbing off’ an element, but it appears to be an issue with specific types of validation annotations.

It appears that if you have the [Required] attribute, then the validation isn’t triggered if you just tab through the corresponding input.

If you have a [RegularExpression] then this is triggered when you tab out.

My suspicion is that the validation is triggered by a combination of theonechange and blur events. This would explain why the regular expression is able to be validated (as it has changed), but not the required test.

This is my view model:

    [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter a first name")]
    [StringLength(50, ErrorMessage = "Maximum of 50 characters")]
    public string FirstName { get; set; }

    [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter a last name")]
    [StringLength(50, ErrorMessage = "Maximum of 50 characters")]
    public string LastName { get; set; }

    [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter a unique email address")]
    [CustomValidation(typeof(User), "ValidateUniqueEmailAddress")]
    [StringLength(255, ErrorMessage = "Maximum of 255 characters")]
    [RegularExpression(EmailRegEx, ErrorMessage = "Invalid email address entered")]
    public string EmailAddress { get; set; }

and the HTML code.

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
   {%>
<%: Html.ValidationSummary(true) %>
<fieldset class="colLeft">
    <legend>Required Fields</legend>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.FirstName) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.FirstName) %>
        <%: Html.ValidationMessageFor(model => model.FirstName) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.LastName) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.LastName) %>
        <%: Html.ValidationMessageFor(model => model.LastName) %>
    </div>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.EmailAddress) %>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.EmailAddress) %>
        <%: Html.ValidationMessageFor(model => model.EmailAddress) %>
    </div>

As you can see, nothing fancy.

In this case, when you tab through all of the inputs (first name, last name, email address), then the [Required] validation is not triggered on any of them. If you input an invalid email address then tab out, the [RegularExpression] validation is triggered.

It seems like a bug/feature of one of the validation libraries.

NOTE: I tested this in VS 2010 as I don’t have access to VS 2008, but I can’t see how this would be any different in the 2 versions as the code is exactly the same between them. I also used Google Chrome.