Question

无法想出这个......

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

例如，如果我在完成之前单击此表单上的“提交”，则所有未完成的字段都会被赋予“.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版本。

Answer 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 }
});

jQuery验证：所有通过验证后输入消失

1 个答案: