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.

Alpine

Answer 1

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

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

Roughhouse

I don't think you need the form() call at the end of the above statement. – Restive

form() is necessary in order to have the error messages on the form updated. Since the question was about an immediate update of the error messages, it is needed. – Roughhouse

@Roughhouse All of a sudden, the above piece of code has stopped working. Can you throw some ideas as to what might have caused this to stop working? – Alpine

Did you update jquery.validate.js? I have not tested with v. 1.9 yet. – Roughhouse

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>

Toscanini

I'm not more working on this project so no way I can try this out. but I liked the suggestion, so thumbs up :) – Alpine

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')",

Malaya

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()) {....

Malaya

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"})

Majormajordomo

That does not work either. My best guess is that after I set the hidden variable, I need to raise some javascript event like change/blur which fire validation again. I'm not sure which that event is though – Alpine

Yes, for the hidden textbox, you would fire the the .change() event. I think that for the hidden input, there is no default changed event to attach to. – Majormajordomo

Unfortunately that does not work. I fire the change event explicitly after setting the hidden textbox value. But validation error does not go away – Alpine

@Alpine validation triggered by the focusout event try this: $("#Rating").focusout(); – Visualize