对“标签输入”插件进行Jquery验证

前端之家收集整理的这篇文章主要介绍了对“标签输入”插件进行Jquery验证前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在利用流行的 Bassistance jquery validate plugin来验证我的表格.在同一表格上,我正在使用 xoxco’s jQuery Tags Input Plugin.

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

原因是,原始输入被隐藏,插件绘制了新的输入.

07002

任何帮助将我的验证样式应用于标签输入将是赞赏,Thanx

解决方法

您可以通过使用自定义方法验证虚拟文本字段来验证标记字段.

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

猜你在找的jQuery相关文章