Question

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

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

Answer 1

对于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>

Answer 2

对于任何不能为空的输入元素，您应该使用required属性：

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

由于您尝试通过ajax发送表单，因此您应该执行以下操作：

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

if (emptyRequired) return true;

这样，提交事件返回到浏览器，然后浏览器本身处理空的required输入，否则它将继续进行ajax调用。

Answer 3

为什么不使用表单验证器插件？你可以在google上找到很多，或者你可以自己轻松完成。

如何防止空输入？

3 个答案: