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.

Reynold Salceda · Accepted Answer · 2011-11-14 15:27:38Z

5

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>

answered Nov 14, 2011 at 15:27

Reynold Salceda

894 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suhas Over a year ago

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

Joe Kehnast · Accepted Answer · 2013-07-22 15:47:00Z

5

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

answered Jul 22, 2013 at 15:47

Joe Kehnast

1272 silver badges9 bronze badges

Comments

Joe Kehnast · Accepted Answer · 2013-12-18 19:14:28Z

5

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

answered Dec 18, 2013 at 19:14

Joe Kehnast

1272 silver badges9 bronze badges

Comments

counsellorben · Accepted Answer · 2011-10-18 00:20:35Z

2

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

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

edited Oct 18, 2011 at 0:20

answered Oct 17, 2011 at 18:36

counsellorben

10.9k3 gold badges42 silver badges37 bronze badges

4 Comments

Nick Olsen Over a year ago

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

counsellorben Over a year ago

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.

Suhas Over a year ago

@counsellorben 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?

counsellorben Over a year ago

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

Matt Tew · Accepted Answer · 2011-10-17 08:07:09Z

1

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

answered Oct 17, 2011 at 8:07

Matt Tew

1,6311 gold badge10 silver badges15 bronze badges

4 Comments

Suhas Over a year ago

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

Matt Tew Over a year ago

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.

Suhas Over a year ago

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

nemesv Over a year ago

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

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related