jquery validation not working on hidden fields

Question

Working on jQuery validator initially some of the field where display none so when the user click next button the error message was showing You have missed 1 fields. Please fill before submitted this was working perfect as i expected. Because I gave ignore:".chk_Field",. But when the user click yes radio button user can able to see some more fields. without filling any of the field If user click the next button still it should say You have missed 5 fields. Please fill before submitted but currently it was saying You have missed 1 fields. Please fill before submitted this is not happening with this line of code ignore:".chk_Field",

Here is my jquery code

function apply_validation() {
    $(".educationForm").validate({
        ignore:".chk_Field",
        onkeyup: false,
        showErrors: function (errorMap, errorList) {

            var errors = this.numberOfInvalids();

            if (errors) {
                var message = 'You have missed ' + errors + ' fields. Please fill before submitted.';
                $errorMessageDiv.html(message);
                $errorMessageDiv.show();
            } else {
                $errorMessageDiv.hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {

            if ($(element).is(':radio')) {

            } else {
                $(element).addClass('errRed');
                $(".chk_field_hlt").addClass('errRed_chkb');
                $('#imageUploadForm').addClass('errRed');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');
        },
        unhighlight: function (element) {

            if ($(element).is(':radio')) {} else {
                $(element).removeClass('errRed');
                $(".chk_field_hlt").removeClass('errRed_chkb');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');

        }
    });
}

Here is the fiddle link

Thanks in advance

@DmytroPastovenskyi if i add ignore[] it was not considering the hidden valeus — Mr.M
– Mr.M, Commented Oct 22, 2015 at 10:57
I have one query do I need put any condition where the user click yes radio button where i am seeing the div block — Mr.M
– Mr.M, Commented Oct 22, 2015 at 11:01

izorgor · Accepted Answer · 2015-10-22 11:28:03Z

1

Try to put this line of code:

$("#expy").find(".chk_Field").removeClass("chk_Field");

Here:

 $(".wrk_clp").click(function () {
        if ($('input[name=rad_emp]:checked').val() == "yes") {
            $expDiv.show();

            $("#expy").find(".chk_Field").removeClass("chk_Field");
}

I just tested and it seems to work.

answered Oct 22, 2015 at 11:28

izorgor

1388 bronze badges

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

2 Comments

Mr.M Over a year ago

yes buddy i suppose to put answer for the same this will work for sure :)

Mr.M Over a year ago

can you please look for this question stackoverflow.com/questions/33223588/…

Collectives™ on Stack Overflow

jquery validation not working on hidden fields

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related