糾正錯誤後，如何讓表單使用新信息？

我在搜索，但我不是100％你如何得到這個重新提交，使用新的信息，我已經得到所有的錯誤和適當的顯示，但在如何再次點擊提交按鈕，然後重新評估表格;我如何去做這件事？任何幫助，將不勝感激。糾正錯誤後，如何讓表單使用新信息？

HTML

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>RATool</title> 
    <link rel="stylesheet" type="text/css" href="cfcss.css"> 
    <script src="cf.js"></script> 
    </head> 
    <body> 
    <h1> Health Authority </h1> 
    <h2> Contact Form </h2> 
     <form> 
     <fieldset> 
     <label for="fname">First Name:</label> 
      <input name="fname" id="fname" class="formfield" type="text"> 
      <span id="errfname" class="error">*This is required</span> 
      <span id="errfname1" class="error">*Name fields must have more than one character, and do not contain numbers 
        or other non-allowed alphabetic characters. The only character the last name 
        field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span> 
      <span id="errfname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span> 
     <br> 
     <label for="sname">Surname:</label> 
      <input name="sname" id="sname" class="formfield" type="text"> 
      <span id="errsname" class="error">*This is required</span> 
      <span id="errsname1" class="error">*Name fields must have more than one character, and do not contain numbers 
       or other non-allowed alphabetic characters. The only character the last name 
       field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span> 
      <span id="errsname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span> 
     <br> 
     <label for="title">Title: </label> 
       <select name="title" id="title"> 
       <option value="Please select">Please select</option> 
       <option value="Mr.">Mr.</option> 
       <option value="Ms.">Ms.</option> 
       <option value="Mrs.">Mrs.</option> 
       <option value="Miss.">Miss.</option> 
       <option value="Master.">Master.</option> 
       </select> 
      <span id="errtitle" class="error">*This is required</span> 
     <br> 
     <br> 
     <br> 
     <label for="HANo">Health Authority Number:</label> 
     <input name="HANo" id="HANo" class="formfield"type="text"> 
      <span id="errHANo" class="error">*This is required</span> 
      <span id="errHANo2" class="error">*This must be in format ZHA123456 (ZHA followed by 6 numbers)</span> 
     <br> 
     <br> 
     <label for="email">Email:</label> 
      <input name="email" id="email" class="formfield"type="text"> 
      <span id="erremail" class="error">*This is required</span> 
      <span id="erremail2" class="error">*Please enter a valid email</span> 
      <br> 
      <br> 
      <br> 
      <label for="telno">Telephone Number:</label> 
       <input name="telno" id="telno" class="formfield" type="text"> 
       <span id="errtelno" class="error">* If a telephone number is entered, then it should contain only numbers, not 
       letters, or other disallowed characters. A valid Zedland telephone number has 
       11 digits (no spaces)</span> 
       <span id="errtelno1" class="error">*This must just be numbers</span> 
      <br> 
      <button onclick="checkForm()">Submit</button> 
     </fieldset> 
     </form> 
    </body> 
</html>

的JavaScript

function checkForm(){  

    var errors=document.getElementsByClassName('error'); 
    for(var i=0;i<errors.length;i++){ 
     errors[i].style.display='none'; 
    } 

    if (document.getElementById("fname").value == "") { 
     document.getElementById("errfname").style.display = "inline"; 
     document.getElementById("errfname").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("fname").value.length < 2) { 
     document.getElementById("errfname1").style.display = "inline"; 
     document.getElementById("errfname1").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("fname").value.length > 1) { 
     checkFName(); 
     e.preventDefault(); 
    } 

    if (document.getElementById("sname").value == "") { 
     document.getElementById("errsname").style.display = "inline"; 
     document.getElementById("errsname").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("sname").value.length < 2) { 
     document.getElementById("errsname1").style.display = "inline"; 
     document.getElementById("errsname1").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("sname").value.length > 1) { 
     checkSName(); 
     e.preventDefault(); 
    } 

    if (document.getElementById("title").value == "Please select") { 
     document.getElementById("errtitle").style.display = "inline"; 
     document.getElementById("errtitle").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("HANo").value == "") { 
     document.getElementById("errHANo").style.display = "inline"; 
     document.getElementById("errHANo").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("HANo").value.length > 0) { 
     if (checkHANo()); 
     e.preventDefault(); 
    } 

    if (document.getElementById("email").value == "") { 
     document.getElementById("erremail").style.display = "inline"; 
     document.getElementById("erremail").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("email").value.length > 0) { 
     if(checkEmail()); 
     e.preventDefault(); 
    } 

    if (document.getElementById("telno").value.length != 11) { 
     document.getElementById("errtelno").style.display = "inline"; 
     document.getElementById("errtelno").style.visibility = "visible"; 
     e.preventDefault(); 
    } 

    if (document.getElementById("telno").value == /^\d+$/) { 
     document.getElementById("errtelno1").style.display = "inline"; 
     document.getElementById("errtelno1").style.visibility = "visible"; 
     e.preventDefault(); 

    } 
} 

function checkEmail(){ 
var email = document.getElementById('email'); 
var emailRegEx = /[-\w.][email protected]([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/; 

if (!emailRegEx.test(email.value)) { 
     document.getElementById("erremail2").style.display="inline"; 
     document.getElementById("erremail2").style.visibility = "visible"; 
     return true; 
} 
e.preventDefault(); 
} 

function checkHANo(){ 
    var HANo = document.getElementById("HANo"); 
    var hanoRegEx = /[ZHA]\d{6}/; 

    if (!hanoRegEx.test(HANo.value)) { 
     document.getElementById("errHANo2").style.display = "inline"; 
     document.getElementById("errHANo2").style.visibility = "visible"; 
     return true; 
    } 
    e.preventDefault(); 
} 

function checkFName(){ 
var first = document.getElementById("fname"); 
var firstRegEx = /^[a-zA-Z-]{2,40}$/; 

if (!firstRegEx.test(first.value)){ 
    document.getElementById("errfname2").style.display = "inline"; 
    document.getElementById("errfname2").style.visibility = "visible"; 
    return true; 
} 
e.preventDefault(); 
} 

function checkSName(){ 
var sec = document.getElementById("sname"); 
var secRegEx = /^[a-zA-Z-]{2,40}$/; 

if (!secRegEx.test(sec.value)){ 
    document.getElementById("errsname2").style.display = "inline"; 
    document.getElementById("errsname2").style.visibility = "visible"; 
    return true; 
    } 
    e.preventDefault(); 
}

來源

2016-08-07 Jiyl

你的問題是什麼？ – jonju

如果錯誤得到糾正，我需要能夠再次點擊提交，並且它意識到錯誤得到糾正，並且錯誤消息消失。目前，一旦出現錯誤，是不會消失的。 – Jiyl

你的錯誤消息是默認顯示。要隱藏這些添加以下CSS類：

.error{ display:none; }

在checkForm()開頭添加這段代碼時，修正錯誤，重新隱藏的消息。例如：

var errors=document.getElementsByClassName('error'); 
for(var i=0;i<errors.length;i++){ 
    errors[i].style.display='none'; 
}

而不是調用按鈕的onclick的formCheck()功能，把它用return形式onsubmit。像

<form method="post" action="yourpage" onsubmit="return checkForm()">

要顯示所有錯誤，聲明具有默認值的變量作爲true像var isValid=true;僅高於/低於for loop 如：

function checkForm(){  
var isValid = true; 
var errors=document.getElementsByClassName('error'); 
for(var i=0;i<errors.length;i++){ 
    errors[i].style.display='none'; 
} 

if (document.getElementById("fname").value == "") { 
    document.getElementById("errfname").style.display = "inline"; 
    document.getElementById("errfname").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("fname").value.length < 2) { 
    document.getElementById("errfname1").style.display = "inline"; 
    document.getElementById("errfname1").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("fname").value.length > 1) { 
    isValid = checkFName(); 
} 

if (document.getElementById("sname").value == "") { 
    document.getElementById("errsname").style.display = "inline"; 
    document.getElementById("errsname").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("sname").value.length < 2) { 
    document.getElementById("errsname1").style.display = "inline"; 
    document.getElementById("errsname1").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("sname").value.length > 1) { 
    isValid = checkSName(); 
} 

if (document.getElementById("title").value == "Please select") { 
    document.getElementById("errtitle").style.display = "inline"; 
    document.getElementById("errtitle").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("HANo").value == "") { 
    document.getElementById("errHANo").style.display = "inline"; 
    document.getElementById("errHANo").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("HANo").value.length > 0) { 
    isValid = checkHANo(); 
} 

if (document.getElementById("email").value == "") { 
    document.getElementById("erremail").style.display = "inline"; 
    document.getElementById("erremail").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("email").value.length > 0) { 
    if(checkEmail()); 
    isValid = false; 
} 

if (document.getElementById("telno").value.length != 11) { 
    document.getElementById("errtelno").style.display = "inline"; 
    document.getElementById("errtelno").style.visibility = "visible"; 
    isValid = false; 
} 

if (document.getElementById("telno").value == /^\d+$/) { 
    document.getElementById("errtelno1").style.display = "inline"; 
    document.getElementById("errtelno1").style.visibility = "visible"; 
    isValid = false; 

} 
return isValid; 
}

注：必須從其他函數返回false這樣如checkEmail()，checkHANo()也是如果有錯誤。看來你只返回true。並刪除所有e.preventDefault()

就是這樣

來源

2016-08-07 05:43:53 jonju

好吧，這需要遵循每個if語句我猜？ – Jiyl

這是否會重新評估表單提交，並刪除錯誤消息，如果他們已被糾正？ – Jiyl

我已經把它放在所有的if語句之後，它似乎仍然沒有擺脫錯誤，即使我改正了它。 – Jiyl

糾正錯誤後，如何讓表單使用新信息？

回答

相關問題