jQuery Validierung funktioniert, aber immer noch in der Lage, Formular zu senden, wenn die Einträge inkorrekt sind

Question

Ich benutze jquery Validierung Plugin bei meinem Kontaktformular, die zurückkehrt, wenn etwas im Formular falsch ist, aber auch wenn die Einträge falsch sind (z. Name nicht länger als 1 Zeichen) Ich kann das Formular absenden und es sendet die E-Mail mit den falschen Daten. Wie kann ich verhindern, dass die Schaltfläche aktiv ist, bevor die Einträge korrekt sind?

$(document).ready(function() { 
    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 

    $('#myform').validate(); 

    $('.btn').click(function(){ 
     var data = $("#myform").serialize(); 
     $('.form').html('').append(newHTML); 
     $.post("includes/sendmail.php", {data}); 
    }); 
}); 

Answer 1

So:

$(function() { 
    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 
    $('#myform').validate(); 
    $('#myform').on("submit",function(e){ 
    e.preventDefault(); 
    if ($(this).valid()) { 
     var data = $(this).serialize(); 
     $(this).html(newHTML); 
     $.post("includes/sendmail.php", {data}); 
    } 
    }); 
}); 

Alternativ documentation nach Ihnen den AJAX-Aufruf in dem Validierungshandler einreicht ausführen können - etwas wie dieses:

$('#myform').validate({  
    submitHandler: function(form) { 
    var data = $(form).serialize(); 
    $(form).html(newHTML); 
    $.post("includes/sendmail.php", {data}); 
    return false; 
    } 
}); 

Answer 2

versuchen, diesen Code, um das Problem zu lösen:

$(document).ready(function() { 

    var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>'; 

    $('#myform').validate({ 
    onSuccess: function(form) { 
     var data = $(form).serialize(); 
     $.post("includes/sendmail.php", {data}); 
     $(form).html(newHTML); 
     return false; 
    } 
    }); 
});