Как предотвратить отправку формы при заполнении полей

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> 

Answer 1

вам нужно будет сделать некоторые проверки, я бы, возможно, отключить кнопку отправки, пока все поля не будут заполнены, что-то вроде этого:

$('#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'); 
     } 
    }); 

вот fiddle