3

I have a form that I am validating on the client-side using the jQuery Validation plugin. For brevity I have created a simple test case showing my issue. The form has a single text input field and a single hidden input field.

<script>
    function testThis() {
        alert('value before: ' + $("#testhidden").val());
        $("#testhidden").val("sometext");
        alert('value after: ' + $("#testhidden").val());
    }
</script>
<form name="testform" id="testform" method="post" action="">
    Enter Text: <input type="text" id="testfield" title="test field is required" name="testfield" size="20" minlength="2" maxlength="10" required="required" />
    <input type="hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />
    <p><input type="button" id="addvalue" name="addvalue" value="Add Value via JavaScript" onclick="testThis();" /></p>
    <p><input type="submit" id="testbutton" name="testbutton" value="Submit Form" /></p>
</form>

Validation for both fields are that they are required and must be of a certain length; at least 4 characters for the hidden field and 2-10 characters for the text field. My caveat is that the hidden field is being updated via JavaScript after the form has been loaded to the DOM.

I have created a fiddle to demonstrate my problem. For this test I have added a button to simulate how I am modifying the hidden input's value via JavaScript. To test do this:

  1. Try to submit the form without entering any text. You should get 2 validation errors.
  2. Next enter text into the text input field and after entering at least 2 characters the first validation message should be hidden.
  3. If you try to submit at this point it still will not because of the hidden field requirement.
  4. Next click the Add value via JavaScript button. I am alerting the before and after values. At this point, once the hidden field has the correct data, I would like the validation message to be hidden but it is not.
  5. At this point the form will submit because the validation criteria has been met but the error message is still displayed.

How can I get the validation message to hide once the hidden field contains the appropriate text?

Here is the simple validation call that I am using to go along with the test form above:

$("#testform").validate({errorElement:"div",ignore:[]});

In case it matters I am using jQuery 1.11.1 and jQuery Validate 1.12.0

Update

Although Pointy's answer does not solve the issue I think he is headed down the right path. I need some way to trigger the validation to fire after updating the hidden field. I have updated my fiddle now by adding a second input text field. I am also updating this input field via JavaScript. When I trigger the blur() event on this new field after updating via JavaScript it correctly hides the validation message. Doing the same thing on the hidden field however still does not work. It definitely has something to do with it being a hidden field...

Improve this question
0

3 Answers 3

Reset to default
4

Quote OP:

"I need some way to trigger the validation..."

The plugin provides a method called .valid() in which its sole purpose is to programmatically trigger validation, either on a single field or the entire form.

"It definitely has something to do with it being a hidden field"

The validation of a regular input field is normally triggered by events such as keyup and blur. Since you don't have those events on a hidden field, you simply need to use the .valid() method to manually trigger validation.

$("#testhidden").valid();

I've modified your function as follows and since you're using jQuery, also removed the inline JavaScript...

$('#addvalue').on('click', function() {
    alert('value before: ' + $("#testhidden").val());
    $("#testhidden").val("sometext");
    $("#testhidden").valid(); // <- manually trigger validation of this field
    alert('value after: ' + $("#testhidden").val());
});

DEMO: http://jsfiddle.net/opzg6uxn/2/

However, I don't understand why you'd need to validate something beyond the control of the user. In other words, since the hidden field is controlled programmatically, what's the point of applying validation to it in the first place?

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

5 Comments

I think you've got the solution here and I like it because it uses the built-in functionality of the plugin. I know my use case seems odd but as I tried to explain in another comment the actual case is that the user completes a CAPTCHA which updates a hidden field. I want the same validation that I am using for the form to also validate the CAPTCHA response before the form can be submitted. Hopefully that helps explain it. Thanks for the useful answer!
@Miguel-F, I see. However, I hope your CAPTCHA is being evaluated on the server, as JavaScript could easily be bypassed and manipulated by the user.
Yes absolutely! I am validating on the server as well. But it doesn't seem right for the form to be submitted (by pressing the enter key) without satisfying the CAPTCHA first.
@Miguel-F, of course. I've just never seen it done this way. I validate the empty field before anything is submitted, and I use the remote method to validate the user's Captcha response against the server. I've never needed to validate any hidden fields.
I have never needed to do this either. During testing a user noticed that they could bypass the CAPTCHA by simply entering text in the field and pressing the enter key (the form's submit button is disabled until the CAPTCHA is satisfied - via JavaScript). My thought was that I need to add the hidden CAPTCHA field to the validation logic so the form cannot be submitted until the CAPTCHA is satisified. Hence my question here. Your solution above seems to be working for me during initial testing. Thanks again!
1

You have to trigger the "change" event yourself to cause the validation code to re-run. Here is your fiddle with that change.

    $("#testhidden").val("sometext").trigger("change");
Improve this answer

5 Comments

Thanks for the response. I tested your fiddle but I still don't see the validation message hide until after clicking the submit button. I am hoping to have the message hide right after the value is added via JavaScript. Kind of like how the validation message is hidden on the input field after you type the characters.
@Miguel-F Well that's up to the validation plugin - it probably tracks keypress events on input elements, but it wouldn't make much sense for it to do so for a hidden element.
Yes I agree with you and I think you are on the right track with triggering some sort of change event for the plugin to catch. I just haven't been able to find the correct one.
@Miguel-F I suspect that the authors of the validation plugin didn't spend a lot of time thinking about behavior for hidden fields, since those are not things that users can change (easily). Telling the user that a hidden field must be filled in is a little weird, though I understand that it's probably driven by some other user interaction in your case.
Yeah I know my use case seems a bit odd utilizing a hidden form field in this way. And I agree that the validation plugin should not normally have to deal with hidden fields on it's own. My actual code is using a sort of CAPTCHA that populates a hidden form field once the user passes it. I am just trying to validate that hidden form field so that the form will not submit unless it has been successfully set as well.
-1

To make it work on jsfiddle, I changed the type of you're hidden input to a simple text type and actually added the style visibility:hidden to make it invisible for the user. With this approach, the validation plugin of jquery will evaluate you're input even if it is invisible for the user.

<input type="text" style="visibility:hidden" id="testhidden" title="hidden field is required" name="testhidden" minlength="4" required="required" />

Hope this answer to you're problem.

Improve this answer

4 Comments

This is quite a hack.
I'm not sure who down voted as this seems to be a legitimate alternative. However, the generation of the input field in my case is out of my control and is being set as a hidden type (by another plugin). Thanks for the response.
I down-voted it for several reasons. The main reason is that it's a ugly hack that screws with the semantics of the HTML. Another, is that it still needs an event trigger, which the answer fails to address.
Indeed this is a quick hack. But this answer does not require a manual trigger of the validation event since the validation plugin would actually trigger it. I would like to know how this kind of hack screws the HTML semantics (for personal knowledge). Thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.