How to prevent form from submitting when fields are blank

Question

I have a form in which I need all the fields to be filled in before submitting. Currently, the fields are being validated to check if they are blank. BUT, if the Submit button is pressed without entering any values into the fields the form sends with all fields returning blank (e.g. Name: Phone: etc). I've tried adding the HTML5 "required" attribute in the form fields, but this doesn't solve the problem for non-HTML5 compliant browsers, or IE.

I'm wondering if you can help me sort this out...Thanks!

At the top of my page I've put:

 <script>
$(function(){
$('#message_form').validate({
submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: 'process.php',
    success: function() {
    $('#message_form').hide();
    $('#contact_form').append("<p id='message_form_thanks'>Thanks! Your request has been sent.</p>")
    }
    });
    }
});         
});
</script>

The process.php code is:

<?php
// Get Data 
$name = strip_tags($_POST['name']);
$phone = strip_tags($_POST['phone']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
// $url = strip_tags($_POST['url']);

// Send Message
mail( "mailto:postmaster@domain.com", "Contact Form Submission",
"Name: $name\nPhone: $phone\nEmail: $email\nMessage: $message\n",
"From: Website Form Enquiry <$email>" );
?>

My form code is:

                <form id="message_form" method="post">
                <div class="success">Contact form submitted! <strong><br>We will be in touch soon.</strong></div>
                <fieldset>
                    <label class="name"><span class="formlabel">  Name:</span>
                        <input type="text" name="name" placeholder="Please provide your full name" required>
                        <span class="error">*This is not a valid name.</span>
                        <span class="empty">*This field is required.</span>
                        <span class="clear"></span>
                    </label>
                    <label class="phone"><span class="formlabel">Phone:</span>
                        <input type="text" name="phone" placeholder="Example: (555) 555-5555" required>
                        <span class="error">*This is not a valid phone number.</span>
                        <span class="empty">*This field is required.</span>
                        <span class="clear"></span>
                    </label>
                    <label class="email"><span class="formlabel">Email:</span>
                        <input type="text" name="email" placeholder="Please provide your email address" required>
                        <span class="error">*This is not a valid email address.</span>
                        <span class="empty">*This field is required.</span>
                        <span class="clear"></span>
                    </label>
                    <span class="formlabel_message">Message:</span>
                    <label class="message">
                        <textarea name="message" placeholder="Please enter your message here" style="margin-top:0;" required></textarea>
                        <span class="error">*The message is too short.</span>
                        <span class="empty">*This field is required.</span>
                        <span class="clear"></span>
                    </label>
                    <div class="buttons-wrapper"><a class="button-2 mobile_noshow" data-type="reset">reset</a>
                    <input type="submit" name="submit" class="button-2" style="margin:0 0 0 7px;border:none;" id="submit" value="Send" /></div>
                </fieldset>
            </form>

How about `e.preventDefault()` method in JQuery, more here http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery and here http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — fujy, Sep 06 '13 at 01:00
What about return false if blank on your validation function? — Andrew Liu, Sep 06 '13 at 01:09

score 4 · Accepted Answer · answered Sep 06 '13 at 01:42

you would need to do some validation, i would maybe disable the submit button until all fields are filled, something like this:

$('#message_form #submit').attr('disabled', 'disabled');  
    $('#message_form input,textarea').on('keyup', function(){
        if($('#name').val() && $('#phone').val() && $('#email').val() && $('#message').val()){
             $('#message_form #submit').removeAttr("disabled");           
        }
        else{
           $('#message_form #submit').attr('disabled', 'disabled');
        }
    });

here is the fiddle

How to prevent form from submitting when fields are blank

1 Answers1