php - フィールドが空白のときにフォームが送信されないようにする方法

Question

送信する前にすべてのフィールドに入力する必要があるフォームがあります。現在、フィールドが空白かどうかを確認するためにフィールドが検証されています。ただし、フィールドに値を入力せずに [送信] ボタンを押すと、フォームはすべてのフィールドが空白で送信されます (例: 名前: 電話: など)。フォーム フィールドに HTML5 の「必須」属性を追加しようとしましたが、HTML5 に準拠していないブラウザーや IE の問題は解決しません。

これを整理するのを手伝ってくれるかどうか疑問に思っています...ありがとう！

私のページの上部に私が置いた：

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

process.php コードは次のとおりです。

<?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>" );
?>

私のフォームコードは次のとおりです。

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