Ajax 및 Jquery 유효성 확인 양식 제출

Question

양식이 있습니다. 이름과 생일이라는 두 가지 입력이 있습니다.

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

모든 입력 잘하고 내 아약스가 작동하지 않는 추가 버튼을 클릭합니다.

아마도 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>