が入力

Question

を検証した後、フォームを送信I以下の登録フォームを持っている：

<form id="register-form" method="post" role="form" style="display: none;" 

action=""> 
    <div class="form-group"> 
     <input type="text" name="firstname" id="firstname" tabindex="1" class="form-control" placeholder="Firstname" value="" required> 
     <span class="error" id="fnError"></span> 
    </div> 
    <div class="form-group"> 
     <input type="text" name="lastname" id="lastname" tabindex="1" class="form-control" placeholder="Lastname" value=""required> 
     <span class="error" id="lnError"></span> 
    </div> 
    <div class="form-group"> 
     <input type="email" name="email2" id="email2" tabindex="1" class="form-control" placeholder="Email Address" value=""required> 
    </div> 
    <div class="form-group"> 
     <input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Password"required> 
     <span class="error" id="pass2Error"></span> 
    </div> 
    <div class="form-group"> 
     <input type="password" name="confirm_password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password" required> 
     <span class="error" id="confError"></span> 
    </div> 
    <div class="form-group"> 
     <div class="row"> 
      <div class="col-sm-6 col-sm-offset-3"> 
       <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now"> 
       <span class="throw_error" id="success"></span> 
       <div id="divLoader"></div> 
      </div> 
      <div class="col-sm-6 col-sm-offset-3"> 
       <span id="result"></span> 
      </div> 
     </div> 
    </div> 
</form> 

そして、私は入力を検証するためにjqueryの検証プラグインを使用しています：

jQuery.validator.setDefaults({ 
     debug: false, 
     success: "valid" 
    }); 
    $('#register-form').validate({ 
     rules:{ 
      firstname :{ 
       required : true, 
       minlength : 3, 
       maxlength : 15 
      }, 
      lastname :{ 
       required : true, 
       minlength : 3, 
       maxlength : 15 
      }, 
      email2:{ 
       required : true, 
       email : true 
      }, 
      password2:{ 
       required : true, 
       minlength : 8, 
       maxlength : 15 
      }, 
      confirm_password:{ 
       required : true, 
       minlength : 8, 
       maxlength : 15, 
       equalTo : "#password2" 
      } 
     } 
    }); 

私は登録ボタンをクリックし 、フィールドの検証が表示され（各フィールドのすべてのエラーが表示されます）、検証エラーがあってもボタン・プレスで使用しているAjaxコードが実行されます。 は、ここに私のボタンは、コードをクリックした：

$('#register-form').submit(function(event){ 
    var formData={ 
     'fn':$('#firstname').val(), 
     'ln':$('#lastname').val(), 
     'email':$('#email2').val(), 
     'pass':$('#password2').val(), 
     'action':'regUser' 
    }; 
    $.ajax({ 
     type: 'POST', 
     url: 'Index.php', 
     data: formData, 
     dataType: 'json', 
     beforeSend: function() { 
      $('#register-submit').attr("disabled","disabled"); 
      $("#divLoader").addClass("loader"); 
      console.log('before send'); 
     }, 
     success: function (data) { 
      if(data.success){ 
       $('#success').fadeIn(1000).append('<p>'+data.userAdded+'</p>'); 
      } 
      else{ 
       $('.throw_error').fadeIn(1000).html(data.errors[0]); 
      } 
     }, 
     error: function(){ 
      alert("System currently unavailable, try again later"); 
     }, 
     complete: function() { 
      $('#register-submit').removeAttr('disabled'); 
      $('#divLoader').removeClass('loader'); 
     } 
    }); 
    event.preventDefault(); 
}); 

私が欲しいのは、私が送信ボタンをクリックして、ボタンをクリックしたイベントがトリガされないことを検証問題があるので、ときAJAX呼び出しが起動しないということです。 どんな助けも感謝します!!

Answer 1

あなたはAJAX呼び出しの前に条件を配置する必要があります。 jquery validateのvalid()関数でフォームの検証をチェックする必要があります。

だからあなたのコードは次のようになります。

$('#register-form').submit(function(event){ 
var formData={ 
    'fn':$('#firstname').val(), 
    'ln':$('#lastname').val(), 
    'email':$('#email2').val(), 
    'pass':$('#password2').val(), 
    'action':'regUser' 
}; 
if($(this).valid()) { 
    //ajax call will be inside of this if condition 
} 

リファレンスlink。

debug: true,を作成してください。

Answer 2

が名前にしようと、あなたのこのようチェックを追加提出validator

var myvalidator = $('#register-form').validate({ 
    // .. 
}); 

変数として、フォームで：

$('#register-form').submit(function(event){ 
    if (! myvalidator.valid()) event.preventDefault(); 
    // goes to ajax 
});