錯誤消息無法在簡單的JavaScript表單驗證中工作

以下代碼在提交時無法顯示錯誤消息。錯誤消息無法在簡單的JavaScript表單驗證中工作

問題是，單擊一次時錯誤消息顯示不正確，但如果您提供多次點擊，則可以正常工作。

幫助將不勝感激。

感謝

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>JavaScript form validation - checking all letters</title> 

    <style type="text/css">  
     li {list-style-type: none; 
     font-size: 16pt; 
     } 
     .mail { 
      margin: auto; 
      padding-top: 10px; 
      padding-bottom: 10px; 
      width: 400px; 
      background : #D8F1F8; 
      border: 1px soild silver; 
     } 
     .mail h2 { 
      margin-left: 38px; 
     } 
     input { 
      font-size: 20pt; 
     } 
     input:focus, textarea:focus{ 
      background-color: lightyellow; 
     } 
     input submit { 
      font-size: 12pt; 
     } 
     .rq { 
      color: #FF0000; 
      font-size: 10pt; 
     } 
    </style> 

</head> 
<body onload='document.form1.text1.focus()'> 
    <div class="mail"> 
     <h2>Enter your Name and Submit</h2> 
     <form name="form1" action="#"> 
      <ul> 
       <li> 
        Code: 
       </li> 
       <li id="myList"> 
        <input type='text' name='text1'/> 
        <p id="error"></p> 
       </li> 
       <li class="rq"> 
        *Enter alphabets only. 
       </li> 
       <li>&nbsp;</li> 
       <li> 
        <input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" /> 
       </li> 
       <li>&nbsp;</li> 
      </ul> 
     </form> 
    </div> 

    <script type="text/javascript"> 
     function allLetter(inputtxt) {  
      var letters = /^[A-Za-z]+$/; 
      if(inputtxt.value.match(letters)) { 
       document.getElementById("error").innerHTML="error here"; 
       return false; 
      } else { 
       document.getElementById("error").innerHTML="success"; 
       return true; 
      } 
     } 
    </script> 
</body> 
</html>

來源

2017-07-18 narend

這裏同樣的問題https://stackoverflow.com/questions/4882691/javascript-error -val-match-is-not-a-function –

[Javascript錯誤：「val.match不是函數」]的可能重複（https://stackoverflow.com/questions/4882691/javascript-error-val-match - 這不是一個功能） – 2017-07-18 13:33:08

你的問題和解決方案是非常簡單的。

當你點擊表單按鈕時，表單會自動提交自己，這就是爲什麼你什麼都看不到。添加到您的按鈕代碼，這樣就可以防止提交輸入的默認功能：

<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />

這應該解決這個問題：

來源

2017-07-18 13:04:42 MaVRoSCy

嗨，它的工作..謝謝你的支持。你可以給我一些參考，我可以通過並獲得深入的JavaScript知識。 – narend

你應該使用event.preventDefault方法以防止頁面刷新。所以，你的函數應該是這樣的：

function allLetter(event) { 
     event.preventDefault(); 
     var letters = /^[A-Za-z]+$/; 
     if (document.form1.text1.value.match(letters)) { 
      document.getElementById("error").innerHTML="error here"; 
      //return false; 
     } else { 
      document.getElementById("error").innerHTML="success"; 
      return true; 
     } 
    }

應以下列方式被稱爲： <input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />

來源

2017-07-18 13:14:09

嗨，它的工作..感謝您的支持。你可以給我一些參考，我可以通過並獲得深入的JavaScript知識。 – narend

不客氣。這是一本關於JavaScript的優秀書：http://shop.oreilly.com/product/9780596805531.do。如果你喜歡看視頻教程，這是最好的選擇：https：//www.pluralsight.com/paths/javascript –

錯誤消息無法在簡單的JavaScript表單驗證中工作

回答

相關問題