JQuery Validation - hidden fields

Question

I have a hidden field that gets populated (via Jquery) when a user clicks on a thumbnail image (with a class of 'thumbnail') using

<input type="hidden" id="DocThumbnail" name="DocThumbnail" value=""/>

and

$(".Thumbnail").click(function() {
    var thumbnailFile = $(this).attr("src");
    $("#DocThumbnail").val(thumbnailFile);
});

I have set up my jquery validation as follows:

$("#AddDocumentForm").validate({
    ignore: [], 
    rules: {
        DocThumbnail : { required : true}
    },
    messages: {
        DocThumbnail: "Please choose a thumbnail"
    }
});

When I click the submit button on the AddDocumentForm the error appears as the value of the hidden field is empty, however when I click on a thumbnail (with a class of 'thumbnail') then hidden field is populated but the validation alert stays on so the form will not submit.

Does anybody know how I can validate a jquery populated hidden field as if I don't add the ignore:[]; line then the hidden field is ignored in the validation

if you're using version 1.9 or higher of the plugin, have you seen this: stackoverflow.com/questions/8466643/…? — Fayyaz Naqvi
– Fayyaz Naqvi, Commented Oct 28, 2015 at 11:20
using version 14 and yes I have seen that post but even adding $.validator.setDefaults({ ignore: '' }); outside of document.ready did not get it working — David
– David, Commented Oct 28, 2015 at 11:32

Ryley · Accepted Answer · 2015-10-28 15:23:52Z

1

You need to call the Validator.element method after you change the value of DocThumbnail. That tells jQuery Validate to re-check DocThumbnail which will make the error message disappear.

Your updated code would look like this:

var validator = $("#AddDocumentForm").validate({
    ignore: [], 
    rules: {
        DocThumbnail : { required : true}
    },
    messages: {
        DocThumbnail: "Please choose a thumbnail"
    }
});

$(".Thumbnail").click(function() {
    var thumbnailFile = $(this).attr("src");
    $("#DocThumbnail").val(thumbnailFile);
    validator.element($('#DocThumbnail'));
});

You can see a working example here: http://jsfiddle.net/ryleyb/r0rkfykg/

answered Oct 28, 2015 at 15:23

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

1 Comment

David Over a year ago

Thanks Ryley, I hacked it by using Jquery within the $(".Thumbnail").click(function() to remove the error label created by the validation (if one existed) but your method is cleaner

Collectives™ on Stack Overflow

JQuery Validation - hidden fields

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related