Twitter Bootstrap Question posted in

Twitter bootstrap – How can I prevent empty input?

I have this code, and if I click send it send with empty fields… Can i prevent this? ex: if user submit with empty fields, will appear one alert..

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

I tried some ways to do this but i cant, i used ev.preventDefault(); but then the button send didn’t work :ss

Tags:

3

Answers


  1. 0

    For your send method, use return true and return 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>
    Login or Signup to reply.
  2. 0

    You should use the required attribute for any input elements that can’t be empty:

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

    Since you are trying to send the form over ajax, you should do something like:

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

if (emptyRequired) return true;

    That way, the submit event returns to the browser, which will then handle the empty required input natively, but otherwise it moves on to the ajax call.

    Login or Signup to reply.
  3. 0

    Why don’t you use a form validator plugin?
    there are plenty of that you can find on google or you can do it easily by yourself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search