在“标签输入"上的jQuery验证插入 [英] Jquery validation on "tags Input" plugin

问题描述

我正在使用流行的 Bassistance jquery validate插件来验证我的形式.我以相同的形式使用 xoxco的jQuery标签输入插件.

I am making use of the popular Bassistance jquery validate plugin to validate my forms. On the same form I am making use of xoxco's jQuery Tags Input Plugin.

除了标签输入"插件正在使用的字段外，我都可以验证表单上的所有表单字段.

I am able to validate all the form fields on my form, except the one that is being used by the "tags input" plugin.

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

The reason is, the original input is being hidden and new ones drawn by the plugin.

jsFiddle示例

感谢您对将验证样式应用于标签输入的任何帮助，Thanx

Any help to apply my validation style to the tags input would be appreciated, Thanx

推荐答案

您可以通过使用自定义方法验证虚拟文本字段来完成技巧，该方法将验证您的标记字段.

You can do a trick by validating a dummy text field with a custom method which will validate your tag field.

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

这篇关于在“标签输入"上的jQuery验证插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！