按Submit按鈕重置所有字段的值（Java Script）

當我按Submit按鈕時，我需要檢查「First Name」和「Father's Name」文本字段的長度，如果它們超過20個字符，我需要顯示紅色文本字段前面的錯誤消息。我的代碼工作正常，除了它顯示錯誤消息，每一件事都在一秒鐘內消失。我需要錯誤信息留在那裏。這是我的Java腳本函數：按Submit按鈕重置所有字段的值（Java Script）

<head> 
     <script type="text/javascript"> 
     function validate() 
     { 
      var firstName=document.f1.firname.value; 
      var fatherName=document.f1.fname.value; 
      var address=document.f1.add.value; 
      var phoneNumber=document.f1.ph.value; 
      var cnic=document.f1.cnic.value; 
      var email=document.f1.email.value; 
      var cgpa=document.f1.fname.value; 
      var sem=document.f1.sem.value; 
      var id=document.f1.cid.value; 
      if(firstName.length>20) 
      { 
       document.getElementById("fin").innerHTML="can't exceed 20 characters!"; 
      } 
      if(fatherName.length>20) 
      { 
       document.getElementById("fn").innerHTML="can't exceed 20 characters!"; 
      } 
     } 
     </script> 
</head>

相應的文本字段有：

<form name="f1" onsubmit="validate()"> 
    Name : <input type="text" name="firname"> <span id="fin" style="color:red"></span> <br> 
    Father's Name: <input type="text" name="fname"> <span id="fn" style="color:red"></span><br> 
</form>

來源

2014-01-19 Ahmed

return false從功能如果驗證失敗？ –

@NeilThompson會發生什麼呢？我只想讓我的錯誤消息留在那裏，如果驗證失敗，它消失 – Ahmed

你的提交火災在哪裏？也許它刷新頁面，並作爲結果一切重置。 –

試試這個：（@ NeilThompson在評論中提到）：

<form name="f1" onsubmit="return validate();"> //put return

而且也把收益在您的javascript代碼：

<head> 
    <script type="text/javascript"> 
    function validate() 
    { 
     var flag = true; 
     var firstName=document.f1.firname.value; 
     var fatherName=document.f1.fname.value; 
     var address=document.f1.add.value; 
     var phoneNumber=document.f1.ph.value; 
     var cnic=document.f1.cnic.value; 
     var email=document.f1.email.value; 
     var cgpa=document.f1.fname.value; 
     var sem=document.f1.sem.value; 
     var id=document.f1.cid.value; 
     if(firstName.length>20) 
     { 
      document.getElementById("fin").innerHTML="can't exceed 20 characters!"; 
      flag = false; 
     } 
     if(fatherName.length>20) 
     { 
      document.getElementById("fn").innerHTML="can't exceed 20 characters!"; 
      flag = false; 
     } 
     return flag; 
    } 
    </script> 
</head>

來源

2014-01-19 12:00:25 Bhushan

如果我想讓兩個錯誤消息同時出現，該怎麼辦？ – Ahmed

@Ahmed請看看，我已經更新了代碼，通過在函數結尾返回標誌，您可以同時顯示兩條消息。 – Bhushan

做得非常好。謝謝 – Ahmed

按Submit按鈕重置所有字段的值（Java Script）

回答

相關問題