HTML5 practice: How to Make form verification more friendly

HTML5 practice: How to Make form verification more friendly
HTML5 practice: How to Make form verification more friendly HTML5 form verification brings convenience to front-end personnel, but there are some defects in user experience. The default prompt is unfriendly to users, you cannot obtain the desired information accurately. Fortunately, when designing interfaces, we provided the setCustomValidilty method to customize the prompt information. This is good news, but there are also some drawbacks. It is necessary to let developers do some extra processing to achieve the purpose they really want. The following example is used to describe the application of the method. SetCustomValidity) method not called! DOCTYPE html> html hea ata charset = "UTF-8 titleform test/title>/head body form name =" test action = "" method = "post> input type =" text "required pattern = "^ \ d {4 [DISCUZ_CODE_21] quot; placeholder = "Enter the code"> button type = "submit"> Check/button>/form>/body>/html> to copy the code execution result: A: No data is input. B: both results do not match. However, this does not match the proposed solution case. Call the setCustomValidity method to optimize the prompt text! DOCTYPE html> head> mata charset = "UTF-8"> title> form test/title>/head> body> form name = "test" action = ". "method =" post "> input type =" text "required pattern =" ^ \ d {4} [DISCUZ_CODE_22] quo; placeholder = "Enter the code"> button type = "submit"> Check/button>/form> script type = "text/javascript"> document. querySelector "input "). setCustomValidity ("Enter the code with four digits");/script>/body>/html> copy the code execution result: A: null B: Invalid C: VALID FROM After the setCustomValidity method is called, all native form verification records return false. Tragedy. Let's look at the changes in interface properties before calling: A) B) C) after calling: A) B) C) From the above we can see that validationMessage is not cleared, valueMissing and patternMismatch are both proven. To sum up, it can be seen from the aspect that the verification passed is not only related to the attribute of the validity interface, but also to the value of validationMessage. Verification is successful only when the attribute (except customError) of the validity interface is false and the validationMessage is empty. Optimized Code :! DOCTYPE html> head> mata charset = "UTF-8"> title> form test/title>/head> body> form name = "test" action = ". "method =" post "> input type =" text "required pattern =" ^ \ d {4} [DISCUZ_CODE_23] quot; oninput = "out (this) "placeholder =" Enter the code "> button type =" submit "> Check/button>/form> script type =" text/javascript "> function out (I) {var v = I. validity; if (true = v. valueMessing) {I. setCustomValidity ("Please fill in some fields");} else {if (true = v. patternMismatch) {I. setCustomValidity ("Enter the code with four digits");} else {I. setCustomValidity ("") ;}}/ script>/body>/html>