Topic: [ BUG REPORT ] Input always invalid with char counter and class .validate
<div class="md-form form-sm">
<input type="text" class="form-control validate" name="char5" id="char5" autocomplete="off" required pattern="[0-9]{5}" maxlength="5" length="5">
<label for="char5" data-error="nope">5 CHAR</label>
</div>
I don't know if i wrong something or it's a bug.
I always get invalid error if insert 5 number.
I've added maxlength so the user can't go over.
Can you help me?
UPDATE 2018-03-28
<div class="md-form form-sm"> <input type="text" class="form-control validate" name="char5" id="char5" required length="5"> <label for="char5" data-error="nope">5 CHAR</label> </div>
This is always invalid if i write 5 char, like a ZIP Code for example.
It must be red underlined only after 5, not on 5.
Anyway i suggest to use maxlength as selector, not length (You get a W3C Warning ) and with maxlength any broser stop you to go over
Hi,
If you remove your length validations so your code looks like this:
<div class="md-form form-sm"><input id="char5" class="form-control validate" autocomplete="off" name="char5" pattern="[0-9]{5}" required="" type="text" /> <label for="char5" data-error="nope">5 CHAR</label></div>
it works fine.
Why do you need length validations? If you are telling the user to enter a 5 character number, and the validation is working correctly, surely you don't need it.
I don't know if it is a bug or not - but it makes sense as to why it doesn't work.
Will have to wait for a member of staff to advise if you still need help...
Thanks
SL-Tech pro commented 7 years ago
Thank for your reply, yes it works, but i like to see the char-counter. Anyway, if i dont use any min/max/pattern, but only use class .validate and length="5", the problem remains, and give always error if i use 5 or more char, but the error should appear on 6 or more char, not 5. So i found that the problem isn't the combination of min/max/pattern/length, but only length attribute with input class validate. For this specific case i've removed length, but for the other cases i would like it to work. I quickly watch the js char-counter, but i dont see any problem, maybe is the validate class, but I havent seen yet
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
SL-Tech pro commented 7 years ago
If I add .validate to input's class with Chrome DevTool in the input at your demo ( at https://mdbootstrap.com/components/inputs/#character-counter ), I have the same error, so I think it's a validate/length conflictJakub Strebeyko staff commented 7 years ago
Hi there, I wasn't able to recreate the error, adding.validateto theelement ends up with getting evaluated as.valid. Best, Kuba