<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-检測表单数据</title>
<style>
[role="alert"]{
background-color: #fcc;
font-weight: bold;
padding:5px;
border:1px dashed #000;
}
div{
margin:10px 0;
padding:5px;
400px;
background-color: #fff;
}
</style>
<script>
window.onload = function(){
document.getElementById("thirdfield").onchange = validateField;
document.getElementById("firstfield").onblur = mandatoryField;
document.getElementById("testform").onsubmit = finalCheck;
}
function validateField(){
removeAlert();
if(!isNaN(parseFloat(this.value))){
resetField(this);
}else{
badField(this);
generateAlert("You entered an invalid value in Third Field. only numeric values such as 105 or 3.45 are allowed");
}
}
function removeAlert(){
var msg = document.getElementById("msg");
if(msg){
document.body.removeChild(msg);
}
}
function resetField(elem){
elem.parentNode.setAttribute("style","background-color:#fff");
var valid = elem.getAttribute("aria-invalid");
if(valid) elem.removeAttribute("aria-invalid");
}
function badField(elem){
elem.parentNode.setAttribute("style","background-color#fee");
elem.setAttribute("aria-invalid","true");
}
function generateAlert(txt){
var txtNd = document.createTextNode(txt);
msg = document.createElement("div");
msg.setAttribute("role","alert");
msg.setAttribute("id","msg");
msg.setAttribute("class","alert");
msg.appendChild(txtNd);
document.body.appendChild(msg);
}
function mandatoryField(){
removeAlert();
if(this.value.length > 0 ){
resetField(this);
}else{
badField(this);
generateAlert("You must enter a value into First Field");
}
}
function finalCheck(){
//console.log("aaa");
removeAlert();
var fields =document.querySelectorAll('input[aria-invalid="true"]');
//var fields =document.querySelectorAll("input[aria-invalid='true']");//错误！！！
console.log(fields);
if(fields.length > 0){
generateAlert("You have incorrect fields entries that must be fixed before you can submit this form");
return false;
}
}
</script>
</head>
<body>
<form id = "testform">
<div>
<label for="firstfield">*first Field:</label><br />
<input id="firstfield" name = "firstfield" type = "text" aria-required = "true" />
</div>
<div>
<label for="secondfield">Second Field:</label><br />
<input id="secondfield" name = "secondfield" type = "text" />
</div>
<div>
<label for="thirdfield">Third Field(numeric):</label><br />
<input id="thirdfield" name = "thirdfield" type = "text" />
</div>
<div>
<label for="fourthfield">Fourth Field:</label><br />
<input id="fourthfield" name = "fourthfield" type = "text" />
</div>
<input type="submit" value = "Send Data" />
</form>
</body>
</html>