Muleskinner Muleskinner - 4 months ago 20
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

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"
/>
Comments