Disabling the jquery.validate functionality for specific fields

Question

I am using jquery.validate to validate some input fields, client side prior to submitting to the server. It works great! This particular group of fields appears in a modal, there are two other modals on the page that are popped at different times, depending on what the user clicks on; however, my validation is only on one of the modals and even if that modal is not on the screen, it is preventing my server side submission.

Below is my code in .js for the modal processing, the one I want to supress is "modalChgPass".

(function (window) {
    var
   $ = window.jQuery,
   modalEdit = '#modal-preferences-edit',
     modalPreferencesEditOpts = {
         autoOpen: true,
         modal: true,
         resizable: false,
         draggable: false,
         width: '700',
         height: '670',
         dialogClass: 'modal',
         appendTo: 'form',
         close: function () { $(this).dialog('destroy'); }
     };



    modalChgPass = '#modal-password-change',
    modalPasswordChangeOpts = {
        autoOpen: true,
        modal: true,
        resizable: false,
        draggable: false,
        width: '450',
        height: '550',
        dialogClass: 'modal',
        appendTo: 'form',
        close: function () { $(this).dialog('destroy'); }
    };


    modalActive = '#modal-card-activate',
    modalCardActivateOpts = {
         autoOpen: true,
         modal: true,
     resizable: false,
     draggable: false,
     width: '700',
     height: '265',
     dialogClass: 'modal',
     appendTo: 'form',
     close: function() { $(this).dialog('destroy'); }
    };



    $(document).ready(function () {
        $('#btn-modal-password-change').click(function () {
            $(modalChgPass).dialog(modalPasswordChangeOpts);
            $(modalChgPass).dialog('open');
            $('.ui-widget-overlay').click(function () {
                $('.ui-dialog-content').dialog('close');
            });
            return false;
        });

        $('#chg-Password-btn').click(function () {
            $(modalChgPass).dialog(modalPasswordChangeOpts);
            $(modalChgPass).dialog('open');
            $('.ui-widget-overlay').click(function () {
                $('.ui-dialog-content').dialog('close');
            });
            return false;
        });

        $('#btn-modal-card-activate').click(function () {
            $(modalActive).dialog(modalCardActivateOpts);
            $(modalActive).dialog('open');
            $('.ui-widget-overlay').click(function () {
                $('.ui-dialog-content').dialog('close');
            });
            return false;
        });

        $('#btn-modal-preferences-edit').click(function () {
            $(modalEdit).dialog(modalPreferencesEditOpts);
            $(modalEdit).dialog('open');
            $('.ui-widget-overlay').click(function () {
                $('.ui-dialog-content').dialog('close');
            });
            return false;
        });

        });


    window.RCC = window.RCC || {};
})(window);

and here is the .js with the validation:

var $ = jQuery;
    $.validator.addMethod('mypassword', function (value, element) {
        return this.optional(element) || (value.match(/[a-zA-Z]/) && value.match(/[0-9]/));
    },
'Password must contain at least one number.');



$(document).ready(function () {
    $("#form1").validate({
        rules: {
            ChgPass$CurrentPass: {
                required: true
            },
            ChgPass$NewPass: {
                required: true,
                minlength: 8,
                maxlength: 16,
                mypassword: true

            },
            ChgPass$ConfirmPass: {
                equalTo: "#ChgPass_NewPass"
            }
        }

    });
});

how do I disable the "modalChgPass" to allow "modalActive" and "modalEdit" to process? Thank you in advance for your assistance. Regards,

Sandcar · Accepted Answer · 2013-11-07 23:21:12Z

3

probably the best way to do what you want is to use the ignore option of the plugin. check this link if that is what you intend

Edit 1

Maybe something like this:

A function to iterate over the modal that you want to disable.

This function would be called when you show your main modal to disable/enabled other modal

     function TogglePanelValidation (panel, enabled) {

      panel.find("input, select").each(function () {
       var thisobj = $(this);

        if (!enabled) {
                $(this).addClass('ignore').removeClass('yourinput class');

        } else {
            if ($this.hasClass('ignore')) {
                $this.removeClass('ignore').addClass('yourinput class')
            }
        }
    });
   }

edited Nov 7, 2013 at 23:21

answered Nov 7, 2013 at 22:45

Sandcar

8921 gold badge9 silver badges22 bronze badges

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

1 Comment

Sparky Over a year ago

Show us how one would one dynamically use this option?

Sparky · Accepted Answer · 2013-11-07 23:34:21Z

1

You cannot dynamically "enable" and "disable" the plugin on the forms. Once you call .validate() to initialize the rules on the fields, you any subsequent call to .validate() will be ignored.

However, the .rules('add') and .rules('remove') methods will allow you to quickly and dynamically add and remove rules on any of the fields without restriction.

My simple demo loads with the rules as declared within .validate(). Then upon clicking a button, validation is effectively disabled for certain fields by removing all rules from that section.

Proof of Concept DEMO: http://jsfiddle.net/xfSs5/

edited Nov 7, 2013 at 23:34

answered Nov 7, 2013 at 22:48

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Comments

Paul T. Rykiel · Accepted Answer · 2013-11-08 22:23:31Z

0

the following code worked to avoid the jquery.validate() The key was to falsify the rules, which only apply to the one modal.

  $('#btn-modal-card-activate').click(function () {
        settings = $('#form1').validate().settings;
        for (var i in settings.rules) {
            settings.rules[i].required = false;
        }
        $(modalActive).dialog(modalCardActivateOpts);
        $(modalActive).dialog('open');
        $('.ui-widget-overlay').click(function () {
            $('.ui-dialog-content').dialog('close');
        });
        return false;
        });

answered Nov 8, 2013 at 22:23

community wiki

Paul T. Rykiel

Collectives™ on Stack Overflow

Disabling the jquery.validate functionality for specific fields

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related