我的HTML表單驗證不起作用

我是初學者，我需要一些幫助來完成我的任務。我無法弄清楚我做錯了什麼。標籤和提交按鈕顯示在html中，但是當我點擊提交按鈕時，它不會驗證表單。我的HTML表單驗證不起作用

我的任務是製作一個表格來輸入你的名字。 Ons提交函數來驗證名稱被調用，將驗證名稱不能爲空，並且必須超過6個字符。

<html> 
    <head> 
    <body> 
     <form name="myForm" autocomplete="on" onsubmit="return validateForm()"> 
     <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
      autofocus="autofocus" /> </label></p> 
     </form> 
     <input type="submit" name="S1" value="Submit response" /> 
     <script> 
     function validateForm(){ 
     var firstName=document.getElementById("firstName"); 
        if (firstName.value.length<6){ 
           alert("Please enter your first name (6 characters or more)"); 
           firstName.focus(); 
           return false; 
     } 
        alert("Thank you for your submission"); 
        return true; 
     } 
     </script> 
    </body> 
    </head> 
</html>

來源

2014-11-25 Greg Corbett

你的HTML被打破：你的第一個輸入字段是你''內部和提交按鈕是''

'但是當我點擊提交按鈕時，它不會驗證表格'' 他似乎確實解釋了他的困難，@HoboSapiens。 – SZenC 2014-11-25 07:53:50

@HoboSapiens有沒有[錯誤]（http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL）在標籤內輸入一個輸入 – MLeFevre 2014-11-25 08:13:31

將提交按鈕內的表單標籤的

function validateForm() { 
 
    var firstName = document.getElementById("firstName"); 
 
    if (firstName.value.length < 6) { 
 
     alert("Please enter your first name (6 characters or more)"); 
 
     firstName.focus(); 
 
     return false; 
 
    } 
 
    alert("Thank you for your submission"); 
 
    return true; 
 
}

<html> 
 
    <head> 
 
    <body> 
 
     <form name="myForm" autocomplete="on" onsubmit="return validateForm()"> 
 
     <p><label>First name &#40;required&#41;<input type="text" id="firstName" 
 
      autofocus="autofocus" /> </label></p> 
 
     <input type="submit" name="S1" value="Submit response" /> 
 
     </form> 
 
    </body> 
 
    </head> 
 
</html>

來源

2014-11-25 07:51:20

當然是哦！謝謝你的幫助！ :-) – 2014-11-25 07:54:41

歡迎您。如果它可以幫助您，請將其標記爲已接受 – 2014-11-25 07:55:54

與您的代碼的問題是，您嘗試將結果返回到一個事件。活動不接受任何迴應。所以試試這個;

<html> 
    <body> 
    <form name="myForm" autocomplete="on" onsubmit="validateForm()"> 
     <p> 
     <label>First name &#40;required&#41;</label> 
     <input type="text" id="firstName" autofocus="autofocus" /> 
     </p> 
     <input type="submit" name="S1" value="Submit response" /> 
    </form> 
    <script> 
     function validateForm(){ 
     var firstName=document.getElementById("firstName"); 
     if (firstName.value.length<6){ 
      alert("Please enter your first name (6 characters or more)"); 
      firstName.focus(); 
      return false; 
     } 
     alert("Thank you for your submission"); 
     document.getElementsByTagName("form")[0].submit() 
     } 
    </script> 
    </body> 
</html>

除此之外，你把你的身體放在你的頭上，這可能會導致一些瀏覽器的麻煩。

來源

2014-11-25 07:52:32 SZenC

「並且您將輸入放入標籤標籤中，這也是不正確的。」 [不，它不是]（http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL）'要隱式地將一個標籤與另一個控件相關聯，控件元素必須位於LABEL元素' – MLeFevre 2014-11-25 08:14:46

@MLeFevre，我總是在輸入之前學習和使用它，而不是在它周圍。猜猜我當時有點不對。 – SZenC 2014-11-25 14:18:11

我有和你一樣的想法，但遇到了我剛纔說的一段話。我想很多人不知道你可以這樣做。我更喜歡現在這樣做，因爲你不必爲標籤指定'for'，或者如果不想爲輸入指定'id'， – MLeFevre 2014-11-25 14:50:51

您的提交按鈕不在form標籤中，這就是爲什麼onsubmit方法不是調用gettting的原因。

來源

2014-11-25 07:55:09 Pankaj

問題出在您的代碼中。請記住，您必須將提交按鈕放在<form></form>標記下。並始終將JS代碼放在<head></head>部分。

找到下面的代碼，並嘗試希望這會爲你工作。

<html> 
    <head> 
     <script> 
     function validateForm() { 
      var firstName = document.getElementById("firstName"); 
      if (firstName.value.length < 6) { 
      alert("Please enter your first name (6 characters or more)"); 
      firstName.focus(); 
      return false; 
     } 
     alert("Thank you for your submission"); 
     return true; 
     } 
     </script> 
    </head> 
    <body> 
     <form name="myForm" autocomplete="on" onsubmit="return validateForm();"> 
     <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
      autofocus="autofocus" /> </label></p> 
     <input type="submit" name="S1" value="Submit response" /> 
     </form> 
    </body> 
</html>

來源

2014-11-25 07:55:56

我的HTML表單驗證不起作用

回答

相關問題