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


this little html5 password field works without oninvalid attribute (the pattern say: minimum 6 characters):

<form>     <input type="password" name="user_password_new" pattern=".{6,}" required />           <input type="submit"  name="register" value="register" /> </form> 

see jsfiddle here.

but when add oninvalid attribute gives out custom error message when user's input not fit pattern, entire field never becomes valid, see code here:

<form>     <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setcustomvalidity('minimum length 6 characters')" required />           <input type="submit"  name="register" value="register" /> </form> 

see jsfiddle here.

can spot mistake ?

if set value setcustomvalidity() field invalid. setting non-zero length string causes browser consider field invalid. in order allow effects of other validations have clear custom validity:

<input type="password" name="user_password_new" pattern=".{6,}" required    oninvalid="setcustomvalidity('minimum length 6 characters')"     oninput="setcustomvalidity('')" /> 

Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -