Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 530
Muleskinner Avatar asked Aug 01 '16 11:08

Muleskinner


People also ask

What is custom validation message in HTML form?

This allows the user to know if a selected field is valid or invalid at a given time, and makes it attainable to convey the user feedback promptly. This is going to return true if an input element contains valid data. Example: This example shows how to do HTML form required attribute along with setting custom validation message.

What happens when input validation fails in JavaScript?

Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails.

How to create custom Excel cell data validation alert dialog?

Create Custom Excel Cell Data Validation Alert Dialog Steps. Select the cells that you want to apply data validation to. Click Data —> Data Validation —> Data Validation menu item. Then it will popup the Data Validation dialog. In the Data Validation dialog, click the Settings tab. The Allow drop-down list lets you select the cell data type.

How do you know if a custom validity message is true?

If a custom validity message is set and it is set to true. If an element’s value does not match its pattern attribute and it is set to true. If an element’s value is greater than it,s max attribute and it is set to true. If an element’s value is less than its min attribute and it is set to true.


1 Answers

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"
/>
like image 107
sticksu Avatar answered Nov 13 '22 11:11

sticksu