A JavaScript example for detecting form data-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A JavaScript example for detecting form data

Jan 23, 2017 pm 05:32 PM

form

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

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

Copy after login

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

Statement of this Website

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