Client side validation not working for hidden field in asp.net mvc 3

Question

I have got a hidden field with a validation for it as below

@Html.HiddenFor(m => m.Rating)
@Html.ValidationMessageFor(m => m.Rating)

The Rating property has Range validator attribute applied with range being 1-5. This is put inside a form with a submit button.

I have then got following jquery that sets the value in hidden field on some user event (Basically user clicks on some stars to rate)

$(".star").click(function(){
    $("#Rating").val(2);
});

Now if I submit the form without the user event that sets the hidden field, the validation works. The error messages is displayed properly and it works all client side.

Now, in this situation, if I click on stars, that invokes the above javascript a sets the hidden field, the validation error message would not go away. I can submit the form after the hidden variable has some valid value. But I'm expecting that the client side validation should work. (When the hidden variable has been set with some valid value, the validation error should go away)

Initially I thought, the jquery validation would be invoked on some special events so I tried raising click, change, keyup, blur and focusout events myself as below

$(".star").click(function(){
    $("#Rating").val(2);
    $("#Rating").change();
});

But this is still not working. The error messages once appeared, does not go away at all.

Answer 1

In the code which sets the hidden field's value, manually invoke validation for the form, like so:

$("form").validate().form();

Answer 2

You can wrap your hidden field with a div put somewhere but still inside the <form>. Add css to kick it to outer space.

<div style="position:absolute; top:-9999px; left:-9999px">
<input id="Rating" type="hidden" name="rating" >
</div>

Then add the following label to where you want to show the error:

<label for="rating" class="error" style="display:none">I am an an error message, please modify me.</label>

Answer 3

Client-side validation ignores hidden fields. You can set the "ignore" option dynamically but just to get it to work I did the following directlyl in the .js file.

For now this should do the trick.

In my aspx...

<%: Html.HiddenFor(model => model.age, new { @class="formValidator" }) %>

In jquery.validate.js

ignore: ":hidden:not('.formValidator')",

Answer 4

This turned out to be a very interesting issue. the default "ignore" setting is ignores hidden fields. The field was hidden in a jQuery ui plug-in. I simply added a class called "includeCheckBox" to the rendered input I wanted to validate and put the following line of code in...

var validator = $('#formMyPita').validate();
validator.settings.ignore = ':hidden:not(".includeCheckBox")';
if ($('#formMyPita').valid()) {....

Answer 5

I think it is because hidden inputs don't fire any of these events.

What you could do instead would be to use a <input type="text" style="display:none" /> instead of the hidden field;

@html.TextBoxFor(m => m.Rating, new {display = "display:none"})