Home >Web Front-end >JS Tutorial >A JavaScript example for detecting form data

A JavaScript example for detecting form data

高洛峰Original: 2017-01-23 17:32:431011browse

A JavaScript example for detecting form data. It is very simple and practical. Interested friends can take a look at

<!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; 
    width: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(&#39;input[aria-invalid="true"]&#39;); 
  //var fields =document.querySelectorAll("input[aria-invalid=&#39;true&#39;]");//错误！！！ 
  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>

For more related articles about a JavaScript example for detecting form data, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript custom function determines whether the website access type is PC or mobile terminalNext article：Javascript custom function determines whether the website access type is PC or mobile terminal

See more

A JavaScript example for detecting form data

Related articles