AjaxとJqueryの検証でフォームを送信

Question

私はフォームを持っています。名前と誕生日という2つの入力があります。

<div id="block"> 
<form role="form" id="addForm" method="post"> 
    <div class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" class="form-control" name="name" id="name" placeholder="Enter name"> 
    </div> 
    <div class="form-group"> 
     <label for="birthday">Birthday</label> 
     <input type="text" class="form-control" id="birthday" required placeholder="Enter birthday"> 
    </div> 
    <button name="submit" id="submit" value="" type="submit" class="btn btn-large btn-primary btn-block">Add</button> 
</form> 
</div> 

そして、私は自分のフォーム使用してjQueryの検証：：私のコードがある

<script> 
$().ready(function() { 
    $("#addForm").validate({ 
     rules:{ 
      name:{ 
       required: true, 
       minlength: 2, 
       maxlength: 10, 
      }, 
     }, 
     highlight: function (element) { 
      $(element).closest('.form-group').addClass('has-error'); 
     }, 
     messages:{ 
      name:{ 
       required: "This field is required", 
       minlength: "Name must be at least 2 characters", 
       maxlength: "Maximum number of characters - 10", 
      }, 
     }, 
     submitHandler: function(form) { 
      $(form).ajaxSubmit({ 
       url:'addEmpl.php', 
       type:'GET', 
       dataType: 'html', 
       success: function(data) { 
        $("#block").html(data); 
       } 
      }); 
     } 
    }); 
}); 
</script> 

すべての入力が正しいと私は私のAjaxは動作しません追加]ボタンをクリックしてください。

submitHandlerに何らかの問題がありますか？

Answer 1

あなたはこのように書くことができます。

$().ready(function() {     
    $("#addForm").validate({ 
     rules:{ 
      name:{ 
       required: true, 
       minlength: 2, 
       maxlength: 10, 
      }, 
     }, 
     highlight: function (element) { 
      $(element).closest('.form-group').addClass('has-error'); 
     }, 
     messages:{ 
      name:{ 
       required: "This field is required", 
       minlength: "Name must be at least 2 characters", 
       maxlength: "Maximum number of characters - 10", 
      }, 
     }, 
     submitHandler: function(form) { 
       $.ajax({ 
        url:'addEmpl.php', 
       type:'GET', 
       dataType: 'html', 
       success: function(data) { 
        $("#block").html(data); 
       } 
      }); 
      return false; // required to block normal submit since you used ajax 
     } 
    }); 
}); 

ここではフィドルhttp://jsfiddle.net/bhumi/bvdu94c4/

です

Answer 2

代わりajaxSubmitの以下のコードを使用してみてください：

$.ajax({ 
    type: "GET", 
    url: "addEmpl.php", 
    data: $(this).serialize(), 
    dataType: "html" 
    success: function(data) { 
    $("#block").html(data); 
    } 
}); 

が、それはあなたを助けることを願っています:)

Answer 3

これを試すことができます

<script> 
$('#submit').click(function(){ 

    //your code here 
}); 
</script>