2

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

但是，编写的自定义验证之一强制人们必须输入合法字符（即它强制您使用有效的 ascii 字符）。我想继续执行 ascii 验证，因为如果我不这样做，人们就可以将不良数据保存到数据库中（这随后会扰乱我们正在运行的集成）。

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

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

4

2 回答 2

3

您可以使用该rules('remove')方法动态删除您的规则。你的“保存”按钮上的东西是这样的。 

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

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

重要说明： 根据rules('remove')文档，“仅操作通过规则选项或通过指定的规则rules('add')。” 换句话说，如果您的规则是通过内联添加的，这将不起作用class="required"。

以及之前返回规则的rules('add')方法addsubmit......

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

演示：http: //jsfiddle.net/3G8cN/

于 2013-01-28T16:44:25.780 回答
0

您可以在所需规则中使用三元运算符来分析元素是否具有在 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;
}

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

Before submit, Iterate all the items and remove the ignore class to the ones you like to be validated.

Side Note: Observe the class="required" at the label. That will add a red asterix aside the field on all the ones that has that class and this is made with the provided css part

于 2021-05-05T22:33:05.983 回答