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
Post a Comment