Form verification detects invalid data for end users and marks these errors, which is an optimization of the user experience.
The following shows that the browser's own verification function can also be viewed on the mobile terminal:
HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>html5 Form Verification</title>
</head>
<body>
<form action="#" class="myform" novalidate="novalidate" onsubmit="return checkForm()">
<fieldset>
<div class="form-group">
<label for="name">name</label>
<div>
<input type="text" class="form-control" name="name" required/>
<span class="form-error">Can't be empty</span>
</div>
</div>
<div class="form-group">
<label for="email">Mail</label>
<div>
<input type="email" class="form-control" name="email" required/>
<span class="form-error">Mail格式不正确</span>
</div>
</div>
<div class="form-group">
<label>province</label>
<select name="province" class="form-control">
<option value="">Please select</option>
<option value="s">Sichuan</option>
<option value="c">Chongqing</option>
</select>
</div>
<input type="submit" class="btn" value="submit"/>
</fieldset>
</form>
</body>
</html>
CSS section:
fieldset{border: 0;}
.myform .form-control{
display: block;
padding: 5px;
width: 100%
}
.myform input:focus:invalid + .form-error{
display: inline;
}
.myform .form-error{
display: none;
position: absolute;
margin-top: .7em;
padding: 1px 2px;
color: #fff;
font-size: .875rem;
background: #f40;
}
.myform .form-error:after{
position: absolute;
content: "";
top: -.5em;
left: .5em;
z-index: 100;
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-bottom: .5em solid #f40;
border-right: .5em solid transparent;
border-left: .5em solid transparent;
border-top: 0 dotted;
transform: rotate(360deg);
overflow: hidden;
}
.btn{
padding: 5px 20px;
}
JavaScript part:
function checkForm(){
var myform = ("formValid");
return check();
}
function check(eles){
var ele;
for(var i = 0;i<;i++){
ele = eles[i];
if( == "SELECT"){
if(!){
alert("Please select a province");
return false;
}
}else if(){
if(!()){
();
return false;
}
}
}
return true;
}
The above is all the code for JavaScript to combine HTML5 to implement form verification. I hope it will be helpful to everyone's learning.