jQuery検証プラグインを使用してフォームを検証する方法は？

Question

私はajaxを使ってデータベースにデータを送信するフォームを持っています。私はjQuery validationでフォームフィールドを検証しようとしていますが、動作させることはできません。フォームは検証コードを無視しているようです。誰かが私が間違っていることを教えてもらえますか？どうもありがとう。

jQueryの

$(document).ready(function() { 
    $("#message").hide(); 


    $("#edit_profile").validate({ //Validate 

     //validation rules go here 
     rules: { 
      user_name: { 
       required: true 
      }, 
      user_email: { 
       required: true, 
      } 
     }, 
    messages: { 
      user_name: "error.", 
      user_email: "error." 
     }, 
     //End Validation 

    $("#submit").on("click", function(e) { 

      e.preventDefault(); 

    var formdata = $(this.form).serialize(); 
      $.post('update_profile.php', formdata, 
       function(data) { 
        $("#message").html(data); 
        $("#message").fadeIn(500); 
        $("#message").fadeOut(500); 
       }); 
     }); 

     return false; 
    }); 
}); 

フォーム

<!--FORM STARTS HERE---> 

<div class="form-group"> 
<form class="" action="" id="edit_profile" method="post"> 
       <label> 
       Name 
       </label> 
       <input id="user_name" name="user_name" type="text" placeholder="<?php echo $user_name ; ?>" value="<?php echo $user_name ; ?>" class="form-control input-md" 
       > 
      </div> 
      <div class="form-group"> 
       <label> 
       Email 
       </label> 
       <input id="user_email" name="user_email" type="text" placeholder="<?php echo $user_email; ?>" value="<?php echo $user_email; ?>" class="form-control input-md" 
       required=""> 
      </div> 
      <button type="submit" class="btn btn-small btn-green pull-right" id="submit"> 

       Save 
      </button> 
    </form> 
    <!--FORM ENDS HERE---> 
<div id="message"></div> 

Answer 1

バリデータを自動的に送信するフォームに呼ばれたよう。
この場合、フォームは提出されません。

submitHandlerにajax呼び出しを入れます。

または

e.preventDefault(); 

Answer 2

前

if (!$("#edit_profile").valid()) { 
return false; 
} 

を使用私はあなたが.validate()に渡すオブジェクトのsubmitHandlerプロパティに提出するためのコードを置くべきだと思います。ドキュメントを見て：あなたは.validate()に渡すオブジェクトの内部$().on('click')ものを置くので、あなたが投稿

https://jqueryvalidation.org/validate/

コードが構文的に正しくありません。

Answer 3

あなたのコードにいくつかの欠陥を見てから適切な答えを書いてみましょう。

フォームが有効なときに実行される関数を渡すには、submitHandlerプロパティを使用します。

この関数には、AJAX呼び出しに使用できる2つの引数form要素とeventインスタンスが付属しています。私はこれを行う方法を理解していない

$("#edit_profile").validate({ 
    rules: { 
     user_name: { 
      required: true 
     }, 
     user_email: { 
      required: true, 
     } 
    }, 
    messages: { 
     user_name: "error.", 
     user_email: "error." 
    }, 
    submitHandler: function (form, e) { 
     e.preventDefault(); 
     $.post('update_profile.php', $(form).serialize(), function(data) { 
      $("#message").html(data); 
      $("#message").fadeIn(500); 
      $("#message").fadeOut(500); 
     }); 
    } 
});