MVC : How to enable client side validation on hidden fields

Question

@Scripts

 <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

@View

@using (Html.BeginForm("TestModelState", "RandD", FormMethod.Post, new {id="form123" }))
{ 
    @Html.TextBoxFor(x => x.htmlText, new { style="display:none"})<br />
    @Html.ValidationMessageFor(x => x.htmlText)
    <div>
      @Html.TextBoxFor(x => x.Uprop1)<br />
      @Html.ValidationMessageFor(x => x.Uprop1)
    </div>
    <input type="submit" value-="Submit" onclick="abc()" />
}

WHAT I have tried

1. Replaced ignore: ":hidden", with ignore: "", inside validate.js

2. var validateMeta = $('#form123').validate(); validateMeta.settings.ignore = "";

3. $.validator.setDefaults({ignore: ""});

4. $.validator.setDefaults({ ignore: [] });

Answer 1

I ran into this same problem. A hidden field on a page was storing a user ID, which was selected from an autocomplete text box. This ID had validation to ensure that a non-zero id was posted back. We wanted to include this validation in the client side.

By default jQuery validate ignores hidden fields, elements with zero width and height, those with css display:none and any elements with an invisible parent (using same criteria).

The ignore setting can however be overridden by adding the following script (I just added it to my custom validator script before calling $.validator.addMethod()):

// By default validator ignores hidden fields.
// change the setting here to ignore nothing
$.validator.setDefaults({ ignore: null });

NOTE: This code won't work if it's run inside the document ready or jQuery $(function () {}) method.

Answer 2

Just after you insert the script for validation set the ignore to "":

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
    $.validator.setDefaults({
        ignore: ""
    });
    </script>
}

Answer 3

try

 var validator = $("#form-id").data('validator');
 validator.settings.ignore = "";

Answer 4

I am not sure why do you need to show validations for fields that user cannot see or edit. But you can try this. Instead of display:none, apply visibility:hidden and height:0 to your input field.

@using (Html.BeginForm("TestModelState", "RandD", FormMethod.Post, new {id="form123" }))
{ 
    @Html.TextBoxFor(x => x.htmlText, new { style="visibility:hidden;height:0"})<br />
    @Html.ValidationMessageFor(x => x.htmlText)
    <div>
      @Html.TextBoxFor(x => x.Uprop1)<br />
      @Html.ValidationMessageFor(x => x.Uprop1)
    </div>
    <input type="submit" value-="Submit" onclick="abc()" />
}