HTML5 Practical application: How to make forms validation more friendly

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