Is the html5 attribute pattern buggy?

Question

The following input field is not working properly.

<input id="textinput" oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" pattern=".{5}" maxlength="255" required="" name="input[1164]" type="text" class="form-control input-md " value="">

What is working?

Typing in the right amount of characters and submitting.

What is not working?

e.g. typing in the wrong amount, hitting submit. After the expected error message is shown, I´m not able to reach the right amount of characters or to fill the input correct (in case it is not depending on the amount of characters).

What browsers have I used to verfiy this bug?

Chrome and Firefox, each in the last stable version.

Want to see it live?

http://jsfiddle.net/0efurqa9/

possible duplicate of [HTML5: Why does my "oninvalid" attribute let the pattern fail?](http://stackoverflow.com/questions/16867407/html5-why-does-my-oninvalid-attribute-let-the-pattern-fail) — Niet the Dark Absol, Sep 29 '14 at 15:37

score 3 · Accepted Answer · edited May 23 '17 at 12:30

Answer already exists :)

HTML5: Why does my "oninvalid" attribute let the pattern fail?

If you set your field with setcustomvalidity, your field is invalid... And STAYS invalid. You need to force the behavior back to its original one, with oninput="setCustomValidity('')", like this:

<form>
  <input id="textinput" 
    oninvalid="setCustomValidity('Die Eingabe ist zu kurz')" 
    oninput="setCustomValidity('')" required="required" pattern=".{5}" 
    maxlength="255" name="input[1164]" type="text" class="form-control input-md " 
    value="">
  <input type="submit">
</form>

Also:

I recommend the use of required="required" instead of required=""
take care: this attribute is not supported in Internet Explorer 9, nor in Safari.

Personally I'd suggest `required` with no value - it's a boolean attribute, after all, so its mere presence is sufficient ;) — Niet the Dark Absol, Sep 29 '14 at 15:37

Is the html5 attribute pattern buggy?

1 Answers1