如何防止空輸入？

我有這個代碼，如果我點擊發送它發送空字段...我可以阻止這個嗎？例如：如果用戶使用空字段提交，會出現一個警告..如何防止空輸入？

<!-- Author: Michael Milstead/Mode87.com 
    for Untame.net 
    Twitter Bootstrap Tutorial 
    Modal Contact Demo, 2013 
--> 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Twitter Bootstrap Modal Contact Form Demo</title> 
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap"> 

    <link href="assets/bootstrap.min.css" rel="stylesheet"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script src="assets/bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("input#submit").click(function(){ 

       $.ajax({ 
        type: "POST", 
        url: "process.php", // 
        data: $('form.contact').serialize(), 
        success: function(msg){ 
         $("#thanks").html(msg) 
         $("#form-content").modal('hide'); 
        }, 
        error: function(){ 
         alert("failure"); 
        } 
       }); 
      }); 
     }); 
    </script> 

    <style type="text/css"> 
     body { margin: 50px; background: url(assets/bglight.png); } 
     .well { background: #fff; text-align: center; } 
     .modal { text-align: left; } 
    </style> 

</head> 
<body> 

<div class="container"> 
    <div class="well well-large"> 
     <h2>Twitter Bootstrap Modal Contact Form Demo</h2> 
     <div id="form-content" class="modal hide fade in" style="display: none;"> 
      <div class="modal-header"> 
       <a class="close" data-dismiss="modal">×</a> 
       <h3>Send me a message</h3> 
      </div> 
      <div class="modal-body"> 
       <form class="contact" name="contact"> 
        <label class="label" for="name" required>Your Name</label><br> 
        <input type="text" name="name" class="input-xlarge"><br> 
        <label class="label" for="email">Your E-mail</label><br> 
        <input type="email" name="email" class="input-xlarge"><br> 
        <label class="label" for="message">Enter a Message</label><br> 
        <textarea name="message" class="input-xlarge"></textarea> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <input class="btn btn-success" type="submit" value="Send!" id="submit"> 
       <a href="#" class="btn" data-dismiss="modal">Nah.</a> 
      </div> 
     </div> 
     <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> 
    </div> 
</div> 

</body> 
</html>

我嘗試了一些方法可以做到這一點，但我不能，我用ev.preventDefault();但隨後的按鈕send沒有工作：SS

來源

2015-05-24 thecreator

對於你的send方法，使用return true並返回false。

$("input#submit").click(function(){ 
If(userInputs === null){ 
    Alert("please fill out form"); 
    event.preventDefault(); 
    return false; 
} 
      $.ajax({ 
       type: "POST", 
       url: "process.php", // 
       data: $('form.contact').serialize(), 
       success: function(msg){ 
        $("#thanks").html(msg) 
        $("#form-content").modal('hide'); 
       }, 
       error: function(){ 
        alert("failure"); 
       } 
      }); 
     }); 
    }); 
</script>

來源

2015-05-24 00:38:37 stackoverfloweth

沒有工作，按鈕不工作..如果我有空領域或沒有:( – thecreator

添加'event.preventDefault（）;'您的點擊處理程序/事件偵聽器之後 – NewToJS

您應該使用required屬性進行任何輸入元素不能爲空：

<input type="text" name="name" required />

既然你要發送超過AJAX的形式，你應該這樣做：

var emptyRequired $('[required]').filter(function() { 
    return $(this).val()===''; 
}); 

if (emptyRequired) return true;

這樣，提交事件返回到瀏覽器，然後瀏覽器將處理本機輸入的空required，否則它將轉到ajax調用。

來源

2015-05-24 00:56:50 Anthony

我以前使用過，沒有結果..當我提交時，沒有出現任何「停止」消息，由'required' – thecreator

它應該停止提交併在必填字段上顯示一些標誌。確保任何js事件處理程序都不會破壞這個，並且您的瀏覽器與這個新的屬性兼容：http://www.wufoo.com/html5/attributes/09-required.html – Anthony

我使用最新的Mozilla Firefox版本.. – thecreator

爲什麼不使用表單驗證器插件？有很多你可以在谷歌找到，或者你可以輕鬆地自己做。

來源

2015-05-24 01:48:41 henriale

如何防止空輸入？

回答

相關問題