使用多種版本的JavaScript驗證表單

Question

我無法確保我的表單完全填寫完畢。

下面是HTML：

<div id="username_input"> 
    <span>User name:</span> <input id="username" onclick="changeBackground('#ffffff', this.id)" type="text" name="firstname" /> 
    <small id="username_error_message">please input username</small> 
</div><!-- End of div id username_input --> 

<div id="email_input"> 
    <span>Email:</span> <input id="email" onclick="changeBackground('#ffffff', this.id)" type="text" name="email" /> 
    <small id="email_error_message">please input email</small> 
</div><!-- End of div id email_input --> 

<div id="textarea"> 
    <textarea id="textarea_body" onclick="clearTextarea()" rows="5" cols="120"></textarea> 
</div><!-- End of div id textarea --> 

<div id="submit_button"> 
    <input id="button" type="submit" name="Submit" value="Post Comment" /> 
</div><!-- End of div id button --> 

所有我想要做的就是確保用戶沒有留下一個空的輸入。

這裏是我遇到了一個問題之前，迄今：

function inputCheck() { 
     /* This is to check if the values, username - email 
      and text area body, in the input form are filled in */ 
     if($('username').value.length == 0 || $('email').value.length == 0 || $('textarea_body').value.length == 0) { 
      if($('username').value.length == 0) { 
       alert("Invalid username"); 
       return false; 
      } else if ($('email').value.length == 0) { 
       alert("Invalid email"); 
       return false; 
      } else { 
       alert("Invalid post"); 
       return false; 
      } 

     } else { 
      return true; 
     } 

我想這三種警報框一次露面。我遇到的問題是，它會查看第一個if語句，然後跳出JavaScript代碼。

我稍後會告訴他們「請輸入電子郵件」或「請輸入用戶名」，但因爲我不能再多一個，如果我不知道這是怎麼回事。

我不想使用js庫。

Answer 1

如果您未使用Javascript庫，那麼$()定義爲？

如果它類似於jQuery庫，那麼您需要使用$('#username')或document.getElementById('username')。

Answer 2

var message = ""; 
if (!$('username').value) { 
    message += "Invalid username. "; 
} 
if (!$('email').value) { 
    message += "Invalid email. "; 
} 
if (message === "") { 
    message = "Invalid post."; 
} 

alert(message); 
return false; 

Answer 3

你return false;語句之後的每個警報將退出你的inputCheck()功能，並返回到我猜是表單提交事件，並返回false阻止提交調用者。這發生在發現第一個錯誤之後。

對於要獲取多個警報框的用戶，他們必須承認表單驗證不是很好的用戶體驗。考慮用表單中的所有錯誤構建一個字符串，並將它們顯示在一個警報中。

function inputCheck() { 
    var errMsg = ''; 

    if($('username').value.length == 0) errMsg += 'Enter a valid username.\n'; 
    if($('email').value.length == 0) errMsg += 'Enter a valid email address.\n'; 
    if($('textarea_body').value.length == 0) errMsg += 'Enter an email body.\n'; 

    if(errMsg.length > 0) { 
     alert('Please correct the following:\n' + errMsg); 
     return false; 
    } 

    return true; 
}