HTML/JavaScript：如何檢測空白提交表單？

Question

下面是一個簡單的表單，要求用戶反饋。

使用HTML和/或JavaScript，如何創建一個警報框，當它檢測到整個表單或表單的一部分爲空時彈出？例如。每當用戶點擊提交一個空白/不完整的表單，提示框：「你忘了填寫姓名/電子郵件/評論」。

非常感謝。

<div> 
     <form method="post" enctype="text/plain" action="MAILTO:name@example.com"> 
     Your Name<br> 
     <input type="text" size="40" name="name"> 
     <br><br> 
     Email Address<br> 
     <input type="text" size="40" name="email"> 
     <br><br> 
     Any Comments or Questions?<br> 
     <textarea name="comments" rows="8" cols="40"></textarea> 
     <br><br> 
     <input type="submit" value="Send">&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="reset" value="Reset"> 
     <br><br> 
     </form> 
    </div> 

Answer 1

你可以使用HTML5 required屬性此

<div> 
    <form method="post" enctype="text/plain" action="MAILTO:name@example.com"> 
    Your Name<br> 
    <input type="text" size="40" name="name" required> 
    <br><br> 
    Email Address<br> 
    <input type="text" size="40" name="email" required> 
    <br><br> 
    Any Comments or Questions?<br> 
    <textarea name="comments" rows="8" cols="40"></textarea> 
    <br><br> 
    <input type="submit" value="Send">&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="reset" value="Reset"> 
    <br><br> 
    </form> 
</div> 

Answer 2

如果你知道的JavaScript這是一塊cake.If的不是，你可以使用this。

Answer 3

這裏展開你的表單標籤

<form onsubmit="return validate();" method="post" enctype="text/plain" action="MAILTO:name@example.com"> 

基本信息：該validate()方法被稱爲每當你嘗試提交表單。 validate()函數的布爾返回值決定表單是否被提交。

爲方便起見，將id屬性添加到所有字段。例如：

<input type="text" size="40" name="email" id="email"> 

的validate()方法

這是您的形式測試的心臟。

<script type="text/javascript"> 
    function validate() 
    { 
     var messages = new Array(); 
     if (document.getElementById('email').value.length == 0) 
     { 
      messages.push('E-Mail missing'); 
     } 
     if (document.getElementById('name').value.length == 0) 
     { 
      messages.push('Name missing'); 
     } 
     if (0 == messages.length) 
     { 
      return true; 
     } 
     // Do something with the messages array 
     return false; 
    } 
</script> 

玩得開心。