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,

Answer 1

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;
        }); 

Answer 2

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/

Answer 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')
            }
        }
    });
   }