jQueryの検証は機能しますが、項目が正しくない場合でもフォームを送信できます

Question

私の連絡先フォームでjqueryの検証プラグインを使用しています。名前は1文字以下）フォームを提出すると、間違ったデータを含むメールが送信されます。エントリがすべて正しければ、ボタンがアクティブにならないようにするにはどうすればよいですか？

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

：

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

またdocumentationに応じてあなたはハンドラを提出し、検証にAJAX呼び出しを実行することができます - このようなもの：

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

Answer 2

問題を解決するために、このコードを試してみてください。

このよう

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