xoxco / jQuery-Tags-Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.
http://xoxco.com/projects/code/tagsinput/
2.29k stars 826 forks source link

<Tab> default behavior #221

Open ikenfin opened 9 years ago

ikenfin commented 9 years ago

Hello! I'm trying to add simple validation through onAddTag callback function like here:

tagsInput = $('#element').tagsInput({
    // other options
    onAddTag : function(tag) {
        if(tag.length < 10)
            tagsInput.removeTag(escape(tag));
    }

So, i want store only words with length 10 characters or greater, and nothing else. But if i press key to switch active input (default form behavior), tags plugin is locking me on input.

After some research, i found this - https://github.com/xoxco/jQuery-Tags-Input/blob/master/src/jquery.tagsinput.js#L283

So, if i change focus:true to focus:false - form works as i expect.

Is there other way to do that?

Thank you!

lucknerjb commented 9 years ago

Why don't you simply use the minChars config option? https://github.com/xoxco/jQuery-Tags-Input/blob/master/src/jquery.tagsinput.js#L181

That would be simpler than re-inventing the logic in an event callback.

If you use the config option, do you still run into issues?

ikenfin commented 9 years ago

Thanks for answer. Yes, i could use minChars for this case (sorry, that was a really bad example).

In our project we combined tagsinput and jquery.maskedInput plugins, and we need validate input harder, than just string length. Real-life code:

var tagsInput = $('#NewBid_phone').tagsInput({
    width:'96.4%',
    height:'auto',
    defaultText:'',
    delimiter: [','],
    minInputWidth : 120,
    focus : false,
    onAddTag : function(tag) {
        // clean text from non digits (maskedInput returns +7(___)___-____
        // if user `blurred` input (by pressing tab for example)
        var cleanPhone = tag.replace(/^\+7|\D/g, '');
        // if digits count less than 10 - it is incorrect phone number
        if(cleanPhone.length < 10) {
            tagsInput.removeTag(encodeURI(tag));
        }
    }
});
// use jquery maskedInput plugin
$("#NewBid_phone_tag").mask('+7(999) 999-9999');

If user entered wrong number, tagsInput locks him into text field. until the field validated successfully, user cannot navigate to other form elements.

lucknerjb commented 9 years ago

Ah ok, I see what you mean. I'll have to give it a try with having the code pull the "focus" option instead of manually setting it to TRUE to see how it behaves.

denizsoft commented 8 years ago

how to count tags word ??? have not any function ???