ajaxフォーム送信ボタンは検証を無視します

Question

私はかなり基本的なアカウント登録フォームを持っています。 フォームの送信は正常に機能し、入力フィールドの検証も正常に動作します。 入力が正しくない場合、動作しないが、送信を妨げている。

<form id="register"> 
    <input id="username" name="username" minlength="3"> 
    <input id="activate" type="button" value="activate"> 
</form> 

<script> 
$().ready(function(){ 
    $("#register").validate({ 
     rules: { username: "required" }, 
     messages: { username: "Please enter a Username } 
    }); 
}); 

$("#activate").click(function(){ 
    var username = $("#username").val(); 

    $.ajax({ 
     type: "POST", 
     url: "validateuser.php", 
     data: { username: username } 
    }).done(function(data){ 
    console.log(data); 
    }); 
}); 
</script> 

これは私のコードの簡単な例です。 .click関数はvalidate()とは関係がないため、今のように動作しないことはわかっています。 しかし、私はちょうど2つの機能を「結合する」方法を理解できません。 validate.jsはinputsのclassesをvalid/invalid thoに変更します。そのため、$.ajaxの機能をチェックする可能性があります。 しかし、より洗練されたソリューションが必要です。

「正規の」jQueryとのやりとりを知っていないため、ライブラリを使用すると、私はいつも非常に混乱します。また、私はjQueryをかなり新しくしていて、ちょうどそれを取得し始めたことに言及する価値があります。

本当にありがとうございます。

Answer 1

送信ハンドラを使用します。あなたが確認機能とは別の機能であるactivateボタンをクリックすると、ajaxが開始されるからです。したがって、検証エラーをバイパス/無視すると呼ばれます。したがって、submitHandlerをjqueryの検証関数内で使用してください。

<script> 
$().ready(function(){ 
    $("#register").validate({ 
     rules: { username: "required" }, 
     messages: { username: "Please enter a Username }, 
     submitHandler:function(){ // Use submitHandler 
      var username = $("#username").val(); 

      $.ajax({ 
      type: "POST", 
      url: "validateuser.php", 
      data: { username: username } 
        }).done(function(data){ 
        console.log(data); 
       }); 
      } 
    }); 
}); 

</script>