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

Have you seen this? http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields — Dmytro Pastovenskyi, Oct 22 '15 at 10:55
@DmytroPastovenskyi if i add ignore[] it was not considering the hidden valeus — Mr.M, Oct 22 '15 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, Oct 22 '15 at 11:01

score 1 · Accepted Answer · answered Oct 22 '15 at 11:28

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 '15 at 11:28

izorgor

138
8

yes buddy i suppose to put answer for the same this will work for sure :) – Mr.M Oct 22 '15 at 11:28
can you please look for this question http://stackoverflow.com/questions/33223588/error-validation-not-displaying-as-expected-when-the-file-is-attached-using-jque – Mr.M Oct 22 '15 at 11:30

jquery validation not working on hidden fields

1 Answers1