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,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library )Unity3D of UGUI Basics -- Three modes of canvas os Simple use of module computer network --- Basic concepts of computer network ( agreement , system )html Writing about cherry trees , Writing about cherry trees Some East 14 Pay change 16 salary , Sincerity or routine ?Unity-Demo Examples ✨ realization UI- Backpack equipment drag function 06【 Interpretation according to the frame 】 Data range filtering -- awesome java Four functional interfaces ( a key , simple )