Topic: [ BUG REPORT ] Input always invalid with char counter and class .validate

SL-Tech pro asked 4 years ago


<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


SL-Tech pro commented 4 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 conflict

Jakub Strebeyko staff commented 4 years ago

Hi there, I wasn't able to recreate the error, adding .validate to the element ends up with getting evaluated as .valid. Best, Kuba

SL-Tech pro answered 4 years ago


Has anyone else had this problem?

Ollie Vincent pro answered 4 years ago


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 4 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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags