jquery - jQuery显示表单警告框

Question

嗨，我正在尝试显示一个警报或可样式化的弹出框，当按下提交按钮时显示空字段。我添加后，下面的代码停止工作alert("Empty Fields!!");

var validator = $("#reg_form").validate({
    errorLabelContainer: $("#reg_form div.error"),
    meta: "validate",
    alert("Empty Fields!!");
});

Answer 1

在另一个答案被接受后，我发布这个是为了未来的读者，因为其他答案似乎都包含一些技术错误并且缺乏解释。

---

.validate()当 JavaScript 只接受key:value成对形式的预定义选项时，您不能简单地将其插入。请参阅所有可用选项的文档：http: //docs.jquery.com/Plugins/Validation/validate#toptions。

如您所见，您需要分配给alert("Empty Fields!!");一个function可用的callback处理程序。由于消息是Empty Fields!!，我将选择invalidHandler回调选项。 根据文档，invalidHandler是： “提交无效表单时回调自定义代码。”

相反，submitHandler:是： “表单有效时处理实际提交的回调。” ~ 由于消息包含Empty Fields!!，因此您不希望在有效表单上显示它。

.validate()将您的函数包含在一个函数中也是一个好主意，document.ready以确保在初始化插件时完全构建 HTML 表单。

工作演示：http: //jsfiddle.net/QYCwH/

$(document).ready(function() {
    var validator = $("#reg_form").validate({
        errorLabelContainer: $("#reg_form div.error"),
        meta: "validate",
        invalidHandler: function(form, validator) {
            alert("Empty Fields!!");
        }
    });
});

---

请注意： 在这种情况下，分配.validate()给名为validator. 由于.validate()只应在准备初始化插件的 DOM 上调用一次，因此您无需再次引用它，因此将其分配给变量确实没有任何好处。

如果您需要触发表单的验证测试或需要表单当前状态的布尔值，只需使用.valid()方法.

$("#reg_form").valid();  // triggers a validation check without having to submit

或者

if ($("#reg_form").valid()) { ...  // tests to see if the form is valid

Answer 2

我假设http://docs.jquery.com/Plugins/Validation/validate是您的代码引用的 jQuery 插件。

您不能在类声明中使用警报。您将不得不像这样重写它：

var validator = $("#reg_form").validate({
    errorLabelContainer: $("#reg_form div.error"),
    meta: "validate",
    submitHandler: function( form ) {
        alert("Empty Fields!!");
    }
});

或使用 invalidHandler: function(form, validator) 而不是 submitHandler

Answer 3

供您将来参考的朋友

validate 接受格式为 {'key1':'value1','key1':'value1'} 的 json 字符串，因此键值和键值对之间必须有分号，并且键值对用逗号分隔，所以请将其用作键值对，即 {'error':function(){alert('hello');}}

Answer 4

var validator = $("#reg_form").validate({
    errorLabelContainer: $("#reg_form div.error"),
    meta: "validate",
    error: function(){alert("Empty Fields!!")};
});

只需error用适当的属性替换该属性...

更新 ：：

刚刚检查了 jQ 文档...

将error处理程序替换为submitHandler

var validator = $("#reg_form").validate({
    errorLabelContainer: $("#reg_form div.error"),
    meta: "validate",
    submitHandler: function(myForm){alert("Empty Fields!!")};
});