MVC : How to enable client side validation on hidden fields

27
votes

@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: [] });

5
jqueryasp.net-mvcasp.net-mvc-4jquery-validateunobtrusive-validation
Client side validation works if I remove "style="display:none" from htmlText text field . – RollerCosta
@Stilgar, you need to update your knowledge over MVC. – RollerCosta
@RollerCosta feel free to give me an update, not only on MVC but in general on why should you validate something that the user cannot possibly input. – Stilgar
Sure, I did not say that user can't enter value. Ex. If we are required to submit a form into two steps (step 1 contains n field and step 2 contains n field) with next and prev link and Submit button on step 2 – RollerCosta
There are certainly good reasons to validate a hidden field. For example, imagine a WYSIWYG HTML editor control that uses a hidden field to store the text content, while the UI is a separate set of controls. – H Dog

5 Answers

47
votes

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.

14
votes

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>
}
8
votes

try 

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

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()" />
}
0
votes
var validator = $("#form-id").data("validator");    
validator.settings.ignore = ""; /* Set validator to ignore nothing. */
validator.form(); /* Validates the form, returns true if it is valid, false otherwise. */

console.log(validator.valid());
console.log(validator.errorList);