如何防止空输入？

我有这个代码，如果我点击发送它发送空字段...我可以阻止这个吗？例如：如果用户使用空字段提交，会出现一个警告..如何防止空输入？

<!-- 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

如何防止空输入？

回答

相关问题