Question

在模态窗口中打开注册表单和登录表单

不幸的是，jQuery验证插件不再起作用了。我进行了搜索，发现有人question with the answer I needed here at 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

我做了一些让我自己傻笑的事情，我发现了这个解决方案：

确保您的表单具有唯一ID。
加载Async或替换页面中的内容后，您就可以了调用这个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
        }
    }
});
}});

}）;

jQuery验证插件和Colorbox

3 个答案: