jQuery 验证插件和 Colorbox

Question

我使用 Colorbox 在模态窗口中打开注册表单和登录表单

不幸的是，jQuery 验证插上就不能用了。我进行了搜索，发现有人在 Stack Overflow 上提出了一个问题，其中包含我需要的答案 。我还不太熟悉 JavaScript，所以在实现该解决方案时遇到了一些问题。

我尝试解释我的代码上的解决方案，但无法弄清楚。我的代码如下

$(document).ready(function(){
    $('.popup').colorbox();
    $('#register form').validate({
        rules: {
            username: {
                required: true,
            },
            email: {
                required: true,
                email: true
            },
            password: {
                minlength: 4,
                required: true
            },
            password2: {
                equalTo: "#password"
            }
        },
        success: function(label) {
            label.text('OK!').addClass('valid');
        }
    });
    $('#login form').validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            }
        }
    })

： });

有人可以澄清我如何实施该解决方案吗？谢谢。

Answer 1

我仔细研究了一下，发现了这个解决方案：

1. 确保您的表单具有唯一的 ID。

2. 加载异步或替换页面中的内容后，您可以
   调用此 JQuery 插件方法：

   $.validator.unobtrusive.addValidation("#formID");

这将删除现有的验证属性并在指定表单中分配新的一次，或者如果您更改“#formID ” 到“form”，它将对页面中的所有表单执行此操作。

确保将此代码添加到页面脚本中：

// **************************** JQUERY PLUGIN **************************
// required for Unobtrusive JQuery Validation for Asynchronous data load
// reference: http://www.mfranc.com/2011/07/04/unobtrusive-validation-in-partial-views/
// *********************************************************************
(function ($) {
    $.validator.unobtrusive.addValidation = function (selector) {
    //get the relevant form
    var form = $(selector);
    // delete validator in case someone called form.validate()
    $(form).removeData("validator");
    $.validator.unobtrusive.parse(form);
    };
})(jQuery);
// *********************************************************************

可以在此处找到带有说明的原始解决方案：
http://www.mfranc.com/2011/ 07/04/unobtrusive-validation-in-partial-views/

Answer 2

这是我使用 JQuery Validation 插件和 Colorbox 时的实现。我所做的是先编译错误，然后在 Colorbox 上显示一次。

var error_list = '';

// submit button
jQuery("#continuebtn").click(function() {
    error_list = '';
    jQuery('#orderPageForm').attr('action', '/submitquote.html');
    jQuery("#orderPageForm").submit();
});

jQuery(document).ready(function(){
    // validate form
    jQuery("#orderPageForm").validate ({
        rules: {
            width: { required: true, number: true, min: 1, max: 999 },  
            height: { required: true, number: true, min: 1, max: 999 },  
            folded_width: { required: true, number: true },
            folded_height: { required: true, number: true },
            stock: "required",
            color: "required",
            folding: "required",
            quantity: { required: true, digit: true, min: 1, max: 100000 },
            turnaround: "required"
        },

        messages: {  
            width: {
                required: "Width is required.", 
                number: "Width value is not a number.",
                min: "Minimum value for width is 1.",
                max: "Maximum value for width is 999."
            },
            height: {
                required: "Height is required", 
                number:"Height value is not a number.",
                min: "Minimum value for height is 1.",
                max: "Maximum value for height is 999."
            },
            folded_width: {
                required: "Folded Width is required", 
                number:"Value is not a number."
            },
            folded_height: {
                required: "Folded Height is required", 
                number:"Value is not a number."
            },
            stock: "Paper Type is required",
            color: "Color is required",
            folding: "Folding Type is required",
            quantity: {
                required: "Quantity is required", 
                number:"Quantity value is not a number.",
                min: "Minimum value for quantity is 1.",
                max: "Maximum value for quantity is 100000."
            },
            turnaround: "Turnaround is required"
        },

        errorPlacement: function(error, element) {
            error_list += error.html() + '<br />';
            jQuery("#error_popup").html(error_list);
            parent.jQuery.colorbox({width:"400px", inline:true, href:"#error_popup"});
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
});

Answer 3

没关系。我想通了。看起来我缺少一个大括号！代码如下：

$(document).ready(function(){
$('.colorbox').colorbox({onComplete:function(){
$('#register form').validate({
    rules: {
        username: {
            required: true,
        },
        email: {
            required: true,
            email: true
        },
        password: {
            minlength: 4,
            required: true
        },
        password2: {
            equalTo: "#password"
        }
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
$('#login form').validate({
    rules: {
        username: {
            required: true
        },
        password: {
            required: true
        }
    }
});
}});

});