CODEWITHSUNDEEP
jqueryjquery-validate
Mr.M
Mr.M

Reputation: 1490

jQuery Validate to ignore hidden fields while still validating fields hidden by a collapsed panel

First of all sorry for the long heading Working with jQuery clone + validation with my current code when the user collapse the panel when I click next button it was validating perfectly but in the panel I have one field which was hidden that should not validate when the user click next button. I have used ignore: [] code so this was working with collapse field but not for hidden field. I want both to work when the user in collapse mode and hidden field.

Here is the jquery code

  $(".educationForm").validate({
        ignore:[],
         onkeyup: false,
            showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();

            if (errors) {
                var message = errors === 0 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {

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

            } else {
                $(element).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');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');

        }
    });
   add_validation_for_forms();
}

Here is the fiddle link

Upvotes: 0

Views: 6923

Answers (1)

Sparky
Sparky

Reputation: 98738

If you want to validate "hidden" fields (hidden by your collapsed panels) but not validate other hidden fields, then you simply need to set the ignore option to something much more specific.

Add a new class called .ignore to your hidden field(s). Then set the ignore option to ".ignore". Of course you can use any class or jQuery selector you wish.

ignore: ".ignore"

Now the collapsed panels will still receive validation while the hidden field is ignored.

DEMO: http://jsfiddle.net/yg97yg19/22/

See documentation:

Elements to ignore when validating, simply filtering them out. ...

Example: Ignores all elements with the class "ignore" when validating.

$("#myform").validate({
    ignore: ".ignore"
});

Upvotes: 1

Related Questions