Field with mask getting wrong minlength validation

[ShadTK]

Good morning

I found an issue while trying to use the mask plugin in conjunction with the minlength attribute for field validation.

http://jsfiddle.net/ngt5d4r1/

Here is a fiddle exemplifying the bug.

I have a field with phone mask(SP rules) and input attribute setting "minlenght=14", meaning anything below 14 digits should return invalid.

To better visualize it, I created a css so that the border of the field is red when invalid, and green when valid.

While typing the number, the input field remains red up until the moment the mask inserts a character such as the dash ("-") or a parenthesis (")"), at which point it turns green. typing anything else will make the field go back to red until the minimum length requirement is met.

Here are some pictures exemplifying:

Could you please take a look at it?

[igorescobar]

@ShadTK I'm sorry I couldn't understand what the plugin could have done for you in this case. Is the mask not working?

[ShadTK]

@igorescobar The mask is working fine, the problem is that it's interfering with the validation attributes of the input field.

I'm aware from looking at other issues that the mask plugin isn't supposed validate input fields, which is fine, but I do believe it shouldn't interfere with native validations either. In this case it looks as if the plugin is somehow interfering in the native HTML 5 minlength validations, and I'm trying to understand why is it doing that.

If you look at my exemple, you'll see that the input field "(12) 3" is returning as a valid input, even though the minlength of 14 characters has not been met. Testing without the mask, the input "(12) 3" returns invalid, which is what I'm expecting. Ergo, something within the mask is causing the input to misread the value as if the length criteria was met. It happens whenever the mask automatically insert a character, such as a dash("-"), or a parenthesis ("(")

[igorescobar]

@ShadTK, As far as I know, we do not touch validations. All we do is listen to events and setting values on input fields.

Even our internal events are all scoped. We do not mess with generic events just so we don't create any sort of conflict.

If you have time and you manage to find why this just let me know. I would start here: https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js#L114

[CharlesChaclim]

@igorescobar you touch on the validation indirectly because you insert the characters of the mask like "(" and "-" with jquery ".val" that ignores minlength, pattern, etc. therefore, whoever uses the mask cannot depend on html validations

[bruninjaman]

for now I'm using javascript validation ex:

$('.class').keyup(function () { if(this.value.length < 8) this.setCustomValidity("length < 8."); else this.setCustomValidity(""); });