Jquery validation on "tags Input" plugin

Question

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 Example

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

Answer 1

Two problems:

1. All of your fields must have a name. Validate will not behave properly if the attribute is not there.
2. You must validate hidden fields in your case. What you'll want to do is use ignore: [] to include validation of hidden fields.

All in all 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 have to use errorPlacement or similar to get the error message to show up properly.

Answer 2

You can do a trick by validating a dummy text field with a custom method which will validate 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 3

The default setting of the validate-Plugin is ignore: ":hidden" which uses jQuery.not() to exclude everything from the ignore-option.

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 validation-code the name-Attribute is strongly required, because the plugin stores everything with the name. Even if you add just ignore: "" to your code, it will give one validation-error, because it's stored with the same name and the name is null.

Here's a working JSFiddle:

JSFiddle