jQuery Validate 插件不会删除错误消息答案

【问题标题】：jQuery Validate plugin doesn't remove error messagesjQuery Validate 插件不会删除错误消息
【发布时间】：2013-04-02 21:31:16
【问题描述】：

我“再次”询问有关 jQuery Validate 插件的问题...

现在，我的问题是错误标签不会隐藏，直到我单击一次提交按钮并且需要第二次单击才能提交表单，知道吗？如果我的输入文本有效，我需要的是隐藏错误标签。

jQuery:

$("#form").validate({
            rules: {
                "name": {
                    required: true,
                    minlength: 3
                },
                "phone":{
                    required:true,
                    digits:true,
                    minlength: 9
                },
               "email":{
                    required: true
                },
                "storageoptions":{
                    required: true
                },
                "quantity":{
                    required:true,
                    digits:true
                }
            },
            messages: {
                "name": {
                    required: "Please enter a name"
                },
                "phone":{
                    required: "Required field"
                },
                "email":{
                    required: "Enter a valid email"
                },
                "storageoptions":{
                    required: "Please select an option"
                },
                "quantity":{
                    required: "This Field required"
                }               
            },
            errorPlacement: function(error, element) {
               error.insertBefore(element);
            },
            submitHandler: function (form) {    

               $.ajax({
                    type: 'POST',
                    data: $(form).serialize(),
                    url: 'file.php',
                    success: function () {
                        form.reset();
                        $('#submit').hide();
                        $('#success-line').show().fadeOut(7000, function(){
                            $('#submit').show("slow");
                        });
                    }
                });
                return false;
            }


        });

这是我的演示：http://jsfiddle.net/ujDC3/

【问题讨论】：

它在你的小提琴中工作正常
默认情况下，插件应该在每次击键时进行验证，但在 your jsFiddle 中，它不起作用，因为您的文本输入被错误地编码为 type="input"。
@karthikr，不，他的 jsFiddle 无法正常工作。只要输入一个字符以满足规则，required 字段上的错误消息就会自动清除。

标签： jquery forms jquery-validate

【解决方案1】：

默认情况下，jQuery Validate 插件会自动清除模糊和 keyup 事件的错误消息。但是，your implementation was broken by invalid HTML。

没有type="input"这样的东西：

<input type="input" name="name" id="name" class="longinput" />

全部改成type="text":

<input type="text" name="name" id="name" class="longinput" />

现在可以正常工作了：http://jsfiddle.net/Y9RFt/

【讨论】：

这么多@Sparky，我没有对表单进行编码，我只是在验证它。拯救了我的一天，我没有看到那个错误。
@paoloi，HTML 是房子的基础。任何项目的第一步都是通过 W3C HTML Validator 运行您的 HTML。

【解决方案2】：

submitHandler 函数只有在验证通过后才会被点击，因此你点击提交按钮来通过验证，然后你必须再次点击它才能最终发送它。

我会使用：

form.submit()

相反。

参考文献：

Jquery Validate Plugin Prevent Double Submit On Validation

jquery validation is forcing a double click on submit for form that submits to thickbox

【讨论】：

form.submit() 是插件应该已经自动执行的操作。 Read the documentation... "submitHandler: 表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。提交的正确位置验证后通过 Ajax 生成表单。” 换句话说，如果使用得当，您不会调用 form.submit()。您链接到的问题与不正确地调用 .validate() 初始化函数有关，但 OP 是由无效的 HTML 引起的。