jQuery.validate not valid if the container is hidden

Question

I have several input separated into different containers (panels). The problem I have is that if one of these panels is hidden (style="display:none;"), the jQuery.validate plugin, does not validate those inputs.

I make a test with a small example and happens the same problem:

view:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Fields</legend>

        <div class="UserName" style="display:none;">
            <div class="editor-label"> @Html.LabelFor(model => model.UserName) </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.UserName) @Html.ValidationMessageFor(model => model.UserName)
            </div>
        </div>

        <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.City) </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.City) @Html.ValidationMessageFor(model => model.City)
        </div>

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

}

Model:

public class UserModel {

    [Required]
    [StringLength(6, MinimumLength = 3)]
    [Display(Name = "User Name")]
    [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
    [ScaffoldColumn(false)]
    public string UserName { get; set; }

    [Required]
    [StringLength(8, MinimumLength = 3)]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Required]
    [StringLength(9, MinimumLength = 2)]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }
    [Required()]
    public string City { get; set; }

}

The "UserName" property is not validated on the client when is inside the div with style "display:none;"

Thank you

Answer 1

its the desired behaviour to not to validate the hidden input fields, with jquery validate plugin you can validate the hidden inputs fields by setting the ignore option like

$('#fromID').validate({
            ignore: "",            
        });

but since you are using the unobtrusive validation in mvc3 that uses the jquery validate plugin you cannot initialize the plugin yourself you will have to change its setting after its initialized like

var validatorSettings = $.data($('form')[0], 'validator').settings;
validatorSettings.ignore = "";

Reference

This is also a helpful blogpost