Question

我在灯箱中有两种形式（使用Magnific Popup）。默认情况下，jQuery验证是在显示时向第一个表单添加验证，但它不适用于任何其他表单，因为它们被Lightbox插件设置为display: none;。

我需要它以便在打开的表单上删除验证，如果切换其可见性，将在第二个表单上运行。我在JS Fiddle中设置了它，看它目前是如何工作的。

Answer 1

您需要做几件事。

同时提供表单ID以便于访问。
应调用每个表单的单独验证代码并调用文档准备好而不是弹出插件的打开事件。
将验证方法的返回值存储在全局变量中。
根据要求调用验证插件的resetForm方法。

最终代码：仅限JS

jq = jQuery;
jq(document).ready(function() {
    runValidation();
    // Lightboxes
    jq('.mpf-open').magnificPopup({
        type: 'inline',
        mainClass: 'mfp-with-fade',
        removalDelay: 300,
        closeBtnInside: true,
        closeOnBgClick: false,
        callbacks: {
            open: function() {
                if(document.objValidSignIn) {
                    document.objValidSignIn.resetForm();
                }
                if(document.objValidSignUp) {
                    document.objValidSignUp.resetForm();
                }
            },
            close: function() {
                if(document.objValidSignIn) {
                    document.objValidSignIn.resetForm();
                }
                if(document.objValidSignUp) {
                    document.objValidSignUp.resetForm();
                }
            },
            change: function() {
                if(document.objValidSignIn) {
                    document.objValidSignIn.resetForm();
                }
                if(document.objValidSignUp) {
                    document.objValidSignUp.resetForm();
                }
            }
        }
    });

    jq('form').submit(function(e) {
        e.preventDefault();
    });
});

jq.validator.setDefaults({ 
    ignore: [],
    // any other default options and/or rules
});

document.objValidSignIn = false, document.objValidSignUp = false;

// Validation
function runValidation() {
    document.objValidSignIn = jq('#SignInForm').validate({
        onsubmit: true,
        focusInvalid: false,
        rules: {
            // Sign In
            signin_email: {
                required: true,
                email: true
            },
            signin_password: {
                required: true
            },
            signin_terms: {
                required: true
            },
            signin_guidelines: {
                required: true
            }       
        },  
        highlight: function(element) {
            jq(element).closest('.required').removeClass('valid').addClass('error');
        },
        success: function(element) {
            jq(element).text('OK!').addClass('valid').closest('.required').removeClass('error').addClass('valid');
        }
    });
    document.objValidSignUp = jq('#SignUpForm').validate({
        onsubmit: true,
        focusInvalid: false,
        rules: {
            // Sign Up
            signup_name: {
                required: true,
            },
            signup_screenname: {
                required: true,
            },          
            signup_email: {
                required: true,
                email: true
            },
            signup_passwordonce: {
                    required: true,
                    minlength: 8
            },
            signup_passwordtwice: {
                    required: true,
                    minlength: 8,   
                  equalTo: '#passwordonce'
            },
            signup_terms: {
                required: true
            },
            signup_guidelines: {
                required: true
            }           
        },  
        highlight: function(element) {
            jq(element).closest('.required').removeClass('valid').addClass('error');
        },
        success: function(element) {
            jq(element).text('OK!').addClass('valid').closest('.required').removeClass('error').addClass('valid');
        }

    });

}

演示：不使用jsfiddle可能是因为全局变量。它在jsbin环境中运行良好。

http://jsbin.com/qoqivanisupe/1/edit

jQuery验证 - 运行以前隐藏的元素

1 个答案: