表單驗證JavaScript - 無警示顯示

Question

我在表單驗證時遇到了麻煩。我已經搜索過，並嘗試了一些東西，但還沒有找到解決方案。我仍然在學習JavaScript，所以我相信這是錯的。以下是我的代碼。

HTML

<section> 
<p>Please type in your information so I can send you the newsletter.<br> 
Required values are marked by an asterisk (*)</p>  
<form id="newsletter" onsubmit="return validateForm()" method "post"> 
<fieldset id="personal"> 
    <legend>Personal Information</legend> 
<label for="name">Name: *</label> 
<input type="text" name="name" id="name" size="40"> 
<br> 
<label for="eMail">E-mail Address: *</label> 
<input type="text" name="eMail" id="eMail"> 
<br> 
<label for="favBeer">Favorite Beer Style:</label> 
<select name="favBeer" id="favBeer"> 
    <option value="IPA">IPA</option> 
    <option value="Saison">Saison</option> 
    <option value="Porter">Porter</option> 
    <option value="Pilsner">Pilsner</option> 
    <option value="Hefeweizen">Hefeweizen</option> 
    <option value="Stout">Stout</option> 
    <option value="Other">Other</option> 
    </select> 
<br> 
<label for="comments"> Additional Information:<label> 
<textarea name="comments" id="comments" cols="55" rows="5"></textarea> 
</fieldset> 
</section> 

的JavaScript

function validateForm() { 
    var name = document.getElementById("name"); 
    if(nameValid(name)){ 
     return true; 
    } 
    return false; 
} 

function nameValid(name) { 
    var name_length = name.length; 
    if (name_length == "") { 
     alert("Name is required"); 
     name.focus(); 
     return false; 
    } 
return ture; 
} 

Answer 1

有幾個問題：

1. ture應該true
2. 你不閉上你的form標籤
3. 有沒有submit按鈕
4. 你一個字符串的長度比較""，而不是一個數字。

但主要是，你想，而不是它的value的長度採取的input（name）的長度。

相反：

function validateForm() { 
 
    var name = document.getElementById("name"); 
 
    if (nameValid(name)) { 
 
    return true; 
 
    } 
 
    return false; 
 
} 
 

 
function nameValid(name) { 
 
    var name_length = name.value.length; 
 
    if (name_length == 0) { 
 
    alert("Name is required"); 
 
    name.focus(); 
 
    return false; 
 
    } 
 
    return true; 
 
}

<section> 
 
    <p>Please type in your information so I can send you the newsletter. 
 
    <br>Required values are marked by an asterisk (*)</p> 
 
    <form id="newsletter" onsubmit="return validateForm()" method "post"> 
 
    <fieldset id="personal"> 
 
     <legend>Personal Information</legend> 
 
     <label for="name">Name: *</label> 
 
     <input type="text" name="name" id="name" size="40"> 
 
     <br> 
 
     <label for="eMail">E-mail Address: *</label> 
 
     <input type="text" name="eMail" id="eMail"> 
 
     <br> 
 
     <label for="favBeer">Favorite Beer Style:</label> 
 
     <select name="favBeer" id="favBeer"> 
 
     <option value="IPA">IPA</option> 
 
     <option value="Saison">Saison</option> 
 
     <option value="Porter">Porter</option> 
 
     <option value="Pilsner">Pilsner</option> 
 
     <option value="Hefeweizen">Hefeweizen</option> 
 
     <option value="Stout">Stout</option> 
 
     <option value="Other">Other</option> 
 
     </select> 
 
     <br> 
 
     <label for="comments">Additional Information: 
 
     <label> 
 
      <textarea name="comments" id="comments" cols="55" rows="5"></textarea> 
 
    </fieldset> 
 
    <input type="submit"> 
 
    </form> 
 
</section>

Answer 2

您需要檢查name元素的值，而不是元素本身。即：

document.getElementById("name").value 

您還需要恰當地比較length爲一個數值，在這個更新的功能：在這裏

function nameValid(name) { 
    var name_length = name.length; 
    alert(name_length); 
    if (name_length < 1) { 
     alert("Name is required"); 
     //name.focus(); 
     return false; 
    } 
    return true; 
} 

小提琴包括一個額外的警告：http://jsfiddle.net/799vymrz/

（雖然console.log是對於您正在調試的值，通常比alert更有幫助;您需要查看瀏覽器控制檯以查看console.log的輸出）