HTML5 Practical application: How to make forms validation more friendly

Source: Internet
Author: User

HTML5 Practical application: How to make forms validation more friendly


HTML5 form validation is convenient for front-end people, but there are some flaws in the user experience, and the default prompts are unfriendly to the user and cannot accurately obtain the information they want. Fortunately, in the interface design, Daniel provides the Setcustomvalidilty method to customize the prompt information. This is good news, but there are some drawbacks, it is necessary to step aside to do some extra processing to achieve the purpose that really want.


The following example is followed to illustrate the application of the method.


Not called setcustomvalidity) Method! 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=" Please enter code ">


Button type= "Submit" >Check/button>


/form>


/body>


/html>


Copy Code Execution results:


A: No Data entered


B: no match


Both of these results are matched. But does not match the hint of the scenario here and the expected non-conformance.


Optimize the hint copy by calling the Setcustomvalidity Method! DOCTYPE html>


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= "Please enter code" >


Button type= "Submit" >Check/button>


/form>


Script type= "Text/javascript" >


Document.queryselector "Input"). Setcustomvalidity ("Please enter a 4-digit code");


/script>


/body>


/html> Copy Code Execution results:


A: Empty


B: Not Legal


C: Legal


From three operations, the native form validation rom returns false after the Setcustomvalidity method is called. Tragedy.


And look at the changes in the interface properties


Before calling:


A


B


C


After the call:


A


B


C


From the above can see Validationmessage not emptied, valuemissing and patternmismatch have been verified pass.


To summarize:


It can be seen from the surface that the validation pass is related to whether the validationmessage has a value in addition to the properties under the validity interface. Validation passes only if the properties under the validity interface (except Customerror) are false and the validationmessage is empty.


Optimized code:! DOCTYPE html>


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= "Please enter 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 ("Please enter a 4-digit code");


}else{


I.setcustomvalidity ("");


}


}


}


/script>


/body>


/html>


HTML5 Practical application: How to make forms validation more friendly

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.