Jquery Validation on the Input Tags Plugin

Question

I use the popular Bassistance jquery validate plugin to validate my forms. In the same form, I am using xoxco jQuery Tags Plugin .

I can check all the form fields in my form except the one used by the tag input plugin.

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

JsFiddle example

Any help on applying my validation style for tagging would be appreciated, Thanx

Answer 1

You can do the trick by checking the dummy text field using a custom method that will check your tag field.

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

Answer 2

Two problems:

• All your fields must have a name . Validate will not behave correctly if the attribute does not exist.
• You must check for hidden fields in your case. What you want to do is use ignore: [] to enable hidden field checking.

In general, your code should look like this:

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

Example: http://jsfiddle.net/5eC5B/

Note that you will need to use errorPlacement or similarly so that the error message displays correctly.

Answer 3

By default, the validate-Plugin module uses ignore: ":hidden" , which uses jQuery.not() to exclude everything from the ignore parameter.

If you want to include hidden fields, you can use this:

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

---

In your case, use this Javascript code:

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

---

Update: As I saw in the verification code, -Attribute is strongly required because the plugin saves everything with name . Even if you add only the ignore: "" code to your code, it will give one validation error because it is stored with the same name and the name is null .

This is where JSFiddle works:

Jsfiddle

Answer 4

jQuery validate by default ignores fields that are not visible. To override this behavior, use $("#someForm").validate({ignore:""});