Muleskinner Muleskinner - 1 year ago 69
HTML Question

Custom validation messages pop up even when input is valid

I am trying to define my own invalidate error message for input

type='email'
.

I use the below HTML. The problem is that when submitting the input, I get the custom error message EVEN if the input value is a valid.

<input name="resp_mail" required="required" onchange="try{setCustomValidity(' ')}catch(e){}" onkeypress="try{setCustomValidity(' ')}catch(e){}" oninvalid="setCustomValidity('Custom error message')" type="email" placeholder="Enter mail" />


Also see this fiddle

Answer Source

If you change the order to have the oninvalid first and remove the space for onchange and onkeypress it seem to me that it works.

<input 
  name="resp_mail"
  required="required" 
  oninvalid="setCustomValidity('Custom error message')" 
  onchange="try{setCustomValidity('')}catch(e){}" 
  onkeypress="try{setCustomValidity('')}catch(e){}" 
  type="email" 
  placeholder="Enter mail"
/>