“标签输入”插件上的 Jquery 验证答案

【问题标题】：Jquery validation on "tags Input" plugin“标签输入”插件上的 Jquery 验证
【发布时间】：2012-06-29 19:22:51
【问题描述】：

我正在使用流行的Bassistance jquery validate plugin 来验证我的表单。在同一个表单上，我正在使用xoxco's jQuery Tags Input Plugin。

我能够验证表单上的所有表单字段，“标签输入”插件正在使用的字段除外。

原因是，原始输入被隐藏，插件绘制了新输入。

jsFiddle Example

任何将我的验证样式应用于标签输入的帮助将不胜感激，谢谢

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

两个问题：

您的所有字段都必须有一个name。如果该属性不存在，验证将无法正常运行。
您必须验证案例中的隐藏字段。您要做的是使用 ignore: [] 来验证隐藏字段。

您的所有代码应如下所示：

HTML：

<form id="someForm" name="someForm" method="post">
    <input type="text" name="required-field" class="required"/>
    <input id="tagsx" type="text" name="tags" class="required" />
    <input type="submit" value="submit"/>
</form>

JavaScript：

$(document).ready(function () {
    $("#someForm").validate({
        ignore: []
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

示例： http://jsfiddle.net/5eC5B/

请注意，您必须使用 errorPlacement 或类似名称才能正确显示错误消息。

【讨论】：

这是一个很好的答案。 jquery.validate 的“缺少手册”的排序

【解决方案2】：

您可以通过使用将验证您的标签字段的自定义方法验证虚拟文本字段来做一个技巧。

HTML：

<form id="someForm" name="someForm" method="post">
    <input type="text" id="txt1" name="txt1"/>
    <input id="tagsx" name="tagsx" type="text" />
    <input id="dummy" name="dummy" type="text" /><!-- dummy text field -->
    <input type="submit" value="submit"/>
</form>

CSS：

/*To hide dummy text field*/
#dummy{
    visibility: hidden!Important;
    height:1px;
    width:1px;
}

JavaScript：

$(document).ready(function () {

    $.validator.addMethod("checkTags", function(value) { //add custom method
        //Tags input plugin converts input into div having id #YOURINPUTID_tagsinput
        //now you can count no of tags
        return ($("#tagsx_tagsinput").find(".tag").length > 0);
    });

    $("#someForm").validate( {
        rules: {
            txt1:"required",
            dummy:"checkTags"
        },
        messages: {
            txt1: "Required",
            dummy: "Required"
        }
    });

    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html' 
    });
});

【讨论】：

我喜欢这种方法，但是，为了让赏金公平，您可以启动并运行一个 jsfiddle 示例吗？谢谢

【解决方案3】：

验证插件的默认设置是ignore: ":hidden"，它使用jQuery.not()从忽略选项中排除所有内容。

如果你想包含隐藏字段，你可以使用这个：

$("#myform").validate({
   ignore: ""
});

在你的情况下使用这个 Javascript 代码：

$(document).ready(function () {
    $("#someForm").validate({
       ignore: ""
    });
    $('#tagsx').tagsInput({
        width: 'auto',
        autocomplete_url: 'http://xoxco.com/projects/code/tagsinput/test/fake_json_endpoint.html'
    });
});

更新：正如我在验证代码中看到的，强烈需要 name-Attribute，因为插件使用 name 存储所有内容。即使您只在代码中添加ignore: ""，它也会给出一个验证错误，因为它与相同的name 一起存储并且名称是null。

这是一个有效的 JSFiddle：

JSFiddle

【讨论】：

【解决方案4】：

jQuery validate 默认忽略不可见的字段。要覆盖此行为，请使用 $("#someForm").validate({ignore:""});

【讨论】：