There are the following HTML structure :
<form action="ok.html"> <input type="text" pattern="\d{1,3}" required
id="myinput"> <p> <input type="submit" value=" Submit "> </p> </form>
When the submitted information is in error , default HTML5 The tip is :

“ Please fill in this field ”  --  Not filled in , In violation required “ Required ” requirement

“ Please match the required format ”  -- Illegal content , In violation pattern Regular requirements of .

How to modify the error message ?

HTML5 Added one for all form elements JS attribute :input.validity      “ Effective , Legitimacy ” , And added events  invalid
“ Error Event , Content invalid event ”.

notes : differ onerror event ,onerror Event is triggered when an error occurs during document or image loading .

We can use input Tagged invalid event , output   input.validity have a look .
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // input label console.info(tag.validity); } // invalid
Input error event . include , Empty , Format error, etc myinput.addEventListener("invalid" ,invalidFun,false);

valid: false  // Whether the current input is valid

badInput: false  // Invalid input , as number Box input abc

patternMismatch: false // Regular expression validation failed

rangeOverflow:  false // Input value exceeds max Limitation of

rangeUnderflow: false // The input value is less than min Limitation of

tooLong : false // The number of characters entered exceeds maxlength

tooShort :   false // The number of characters entered is less than minlength

stepMismatch : false // The number entered does not match step limit

typeMismatch : false // Input value does not match email,url Verification of

valueMissing : false // No value entered , In violation required requirement

customError :  false // Is there a custom error

Properties of the above property values :
  
(1) As long as there is a verification error , A property is true,valid The value is false
  
(2) Only if there are no validation errors , All properties are false,valid Can be true
 
 (3) Each of these errors has a predefined error message inside the browser
 
 (4) In all error messages , As long as it exists “ Custom error messages ”, Browser displays only custom error messages , Priority over browser predefined error messages
 
 (5) There are currently no custom error messages , therefore customError :  false 

If you want to customize the error information , Can determine the type of error :
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // label console.info(tag.validity); if(
tag.validity.valueMissing ){ myinput.setCustomValidity(" The content must be filled in "); }else if(
tag.validity.patternMismatch ){ myinput.setCustomValidity(" Incorrect format ! Please enter a valid three digit number .");
}else{ myinput.setCustomValidity(" Other errors "); } } // invalid Input error event . include , Empty , Format error, etc
myinput.addEventListener("invalid" ,invalidFun,false);
How to set custom error messages :
input.setCustomValidity(' Error message ');  // This is equivalent to input.validity.customError:true

however , When the form element has no errors , Need to cancel custom error message , Otherwise, the form cannot be submitted :
input.setCustomValidity("");     // This is equivalent to input.validity.customError:false
var myinput = document.querySelector("#myinput"); function invalidFun(e){ var
tag = e.target ; // label console.info(tag.validity); if(
tag.validity.valueMissing ){ myinput.setCustomValidity(" The content must be filled in "); }else if(
tag.validity.patternMismatch ){ myinput.setCustomValidity(" Incorrect format ! Please enter a valid three digit number .");
}else{ myinput.setCustomValidity(" Other errors "); } } // invalid Input error event . include , Empty , Format error, etc
myinput.addEventListener("invalid" ,invalidFun,false); //
There are no errors in the input , To cancel the custom error prompt , Otherwise, the form cannot be submitted function validFun(e){ var tag = e.target ; //
label console.info(tag.validity); myinput.setCustomValidity(""); }
myinput.addEventListener("input" ,validFun,false);
After form submission , The sequence of events is as follows :
(1)submit Button's click event , If you cancel the default event , Then terminate
(2)html5 Form validation and tips , If form validation fails , The first illegal input will be prompted , And terminate
(3)form Form's submit event , If you cancel the default event , Then terminate

therefore , You can see HTML5 Built in verification , Occurs on the form's onsubmit Before the event .

 

Technology
©2019-2020 Toolsou All rights reserved,
inherit jpa Repository Write custom method query ( Essence )2020 year 6 month 26 day C# Class library model PageInputLinux File name validity detection python Short circuit logic in Share has surpassed Ningde Era !LG Chemical confirmation to spin off battery business unit Golang Array bisection , Array split , Array grouping Centos7 lower mysql8.0 To install and change the initial password ;Dijkstra Algorithmic Python realization - Shortest path problem keras from dataframe Read data and enhance the data for training ( classification + division )jmeter-while Summary of controller use