1

想不通这个...

在下面的表单中，一旦验证通过所有输入，所有输入就会消失，只留下提交按钮可见。

例如，如果我在完成之前单击此表单上的“提交”，所有未完成的字段都会被赋予“.incomplete”错误类以标记它们不正确。如果我然后逐一检查输入并完成它们，错误类就会消失。但是一旦最后剩下的输入完成并且错误类被删除，所有输入都会消失，只剩下“提交”。

我可以说它与 .incomplete CSS 类有关，只要用户单击“提交”而没有正确完成所有字段，就会应用该类。但是，我无法弄清楚是什么导致了这种行为。非常感谢任何帮助或想法！很抱歉他的代码片段太长，但我认为在这种情况下，信息太多总比不够好。

验证规则：

$(document).ready(function() {
       $("#form").validate({
            errorLabelContainer: ".textbox",
            keyup: false,
            onfocusout: false,
            onclick: false,
            errorElement: "input",
            errorClass: "incomplete",
            rules: {
                organization: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                email: {
                    defaultInvalid: true,
                    required: true,
                    email: true
                    },
                phone: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 10,
                    },
            },
        });
   });

表单 HTML：

<div id="form">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input id="organization" class="textbox" type="text" name="organization" minlength="2" value="Organization"/>
        <input id="firstname" class="textbox"  type="text" name="firstname" minlength="2" value="First Name"/>
        <input id="lastname" class="textbox"  type="text"  name="lastname" minlength="2" value="Last Name"/>
        <input id="email" class="textbox"  type="text" name="email" value="Email"/>
        <input id="phone" class="textbox"  type="text" name="phone" value="Phone"/>
        <!-- submit button -->
        <input id="button" name="submit" class="button" type="submit" value="submit"> 
    </form>
</div>

我正在使用 jQuery 验证插件的 1.9 版。

4

1 回答 1

1

首先，您是否添加了自定义方法

jQuery.validator.addMethod("defaultInvalid", function(value, element) 
{
    return !(element.value == element.defaultValue);
});

然后更正您的验证JS，底部有多余的逗号

(document).ready(function() {
       $("#form").validate({
            errorLabelContainer: ".textbox",
            keyup: false,
            onfocusout: false,
            onclick: false,
            errorElement: "input",
            errorClass: "incomplete",
            rules: {
                organization: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                firstname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                lastname: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 2
                    },
                email: {
                    defaultInvalid: true,
                    required: true,
                    email: true
                    },
                phone: {
                    defaultInvalid: true,
                    required: true,
                    minlength: 10
                }
            }
        });
   });

另外我建议您尝试这种方式：

$('#Form').validate({           
            onchange: false,            
            errorLabelContainer: $('.error-container'),
            wrapper: "p",
                    rules: { ...//specify rules here }
});
于 2012-09-04T18:59:18.157 回答