CODEWITHSUNDEEP
jqueryvalidationhidden
David
David

Reputation: 106

JQuery Validation - hidden fields

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

Upvotes: 1

Views: 5690

Answers (1)

Ryley
Ryley

Reputation: 21216

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/

Upvotes: 1

Related Questions