Question

我正在使用jQuery validate插件在我的表单上进行自定义验证。对于一种特定类型的表单，用户可以选择提交表单，或者他们也可以保存表单而不提交。我能够使用$('form.validate').validate().cancelSubmit = true;来抑制保存按钮的onClick处理程序中的验证，并且生活很顺利。

但是，其中一个自定义验证强制要求人们必须输入合法字符（即强制您使用有效的ascii字符）。我想继续强制执行ascii验证，因为如果不这样做，人们就可以将不良数据保存到数据库中（这会导致我们运行的集成混乱）。

基本上我想强制执行除必需之外的所有规则：true。我发现在$('form.validate').validate({ignore : ".required"});表单上设置验证时可以使用ignore选项，但这只在您最初设置验证时才起作用。当我尝试在用户点击按钮时执行此操作时，它似乎没有做任何事情。

我看过一些关于类似事情的帖子，但通常与忽略隐藏字段有关。有人知道我需要使用正确的语法/方法来忽略点击按钮时所需的规则吗？任何帮助将不胜感激。

Answer 1

您可以动态使用the rules('remove') method to remove your rules。你的“保存”按钮上有这样的东西。

$('#save').click(function () {
    $('#myform').find('.myclass').each(function () {
        $(this).rules('remove', 'required');
    });
    // your code to save form
});

演示：http://jsfiddle.net/NqT2V/

重要提示：As per rules('remove') documentation，“仅处理通过rules-option或rules('add')指定的规则。”换句话说，此{ {3}}

submit之前的will not work if your rules are added inline via class="required" ...

$('#submit').click(function (e) {
    e.preventDefault();
    $('#myform').find('input').each(function () {
        $(this).rules('add', 'required');
    });
    $('#myform').submit();
});

演示：rules('add') method to add the rules back

Answer 2

您可以在所需规则中使用三元运算符来分析元素是否在 html 中声明了内联类“忽略”。

示例波纹管

HTML

<div class="row">
    <div class="input-field">
        <input id="userName" name="userName" type="text" class="validate ignore" maxLength="10">
         <label for="userName" class="required">Name</label>    
     </div>   
</div>

JS

    $('#userName').rules("add", {
        required: $('#userName').hasClass('ignore')? false: true,
        messages: {
            required: "This field is required!",
        }
    });

CSS

.required:before {
    content: "*";
    color: red;
    position: absolute;
    margin-left: -13px;
    font-weight: normal;
    font-size: 23px;
}

在保存之前，迭代所有项目并将忽略类添加到您喜欢绕过的项目中。删除您想要验证的所有忽略类。

在提交之前，迭代所有项目并将忽略类删除到您想要验证的项目。

旁注：注意标签上的 class="required"。这将在所有具有该类的字段旁边添加一个红色星号，这是使用提供的 css 部分制作的

使用jQuery验证忽略某些验证规则

2 个答案: