Ajax 및 Jquery 유효성 확인을 사용하여 양식을 제출하는 방법은 무엇입니까?

Ajax에서 from을 제출하고 유효성 확인을 위해 쿼리 유효성 검사 플러그인을 사용하려고합니다. Ajax 및 Jquery 유효성 확인을 사용하여 양식을 제출하는 방법은 무엇입니까?

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="jquery.validate.js"></script> 
</head> 

<body> 
    <form id="myForm"> 
     <input type="text" name="name" /> 
     <br/> 
     <input type="text" name="school" /> 
     <br/> 
     <input type="submit" /> 
    </form> 
    <div id="result"></div> 

<script>   
    $(document).ready(function() { 

    $("#myForm").validate({ 
     onkeyup: false, 
     rules: { 
      name: { 
       required: true, 
       minlength: 5 
      }, 
      school: { 
       required: true, 
       minlength: 5 
      } 
     } 
    }); 

    event.preventDefault(); 
    $("#result").html(''); 
    var values = $(this).serialize(); 

    $("#myForm").ajaxForm({ 
     url: "add_admin.php", 
     type: "post", 
     data: values, 
     beforeSubmit: function() { 
      return $("#myForm").valid(); 
     }, 
     success: function(){ 
      //alert("success"); 
      $("#result").html('Submitted successfully'); 
     }, 
     error:function(){ 
//   alert("failure"); 
      $("#result").html('There is error while submit'); 
     } 
    }); 

}); 

</script> 
</body>

가 있지만 작동하지 않았다 : 나는 아래의 코드를 작성합니다. 내가 여기서 실수 한거야? 어느 누구도 나를 도울 수 있습니까? 텍스트 텍스트 텍스트 텍스트 텍스트

출처

2015-01-14 Drop Shadow

당신이'$ (이) .serialize()'와'에서는 event.preventDefault()'당신의 DOM ready 이벤트 핸들러 함수의 내부. 직렬화 할 'this'가 없거나이 위치에서 방지 할 'event'가 없으므로 특히 전혀 이해가되지 않습니다. – Sparky

업데이트 : 사용이 요소를 검사 아래 NET 탭에서 아약스

JSFiddle here

확인 당신에게 힘을주는 모든 상황에서 작동하기 때문에 옵션 다음에 또는 Firebug

$("#myForm").validate({ 
    rules: {   
     school: { 
      required: true, 
      minlength: 5 
     } 
    }, 
    submitHandler: function(form) { 
     //Your code for AJAX starts  

     jQuery.ajax({ 
        url:'ajax.php', 
        type: "post", 
        data: $(form).serialize(), 
        success: function(){ 
         //alert("success"); 
         $("#result").html('Submitted successfully'); 
        }, 
        error:function(){ 
      //   alert("failure"); 
         $("#result").html('There is error while submit'); 
        }     
     //Your code for AJAX Ends 
    });  
    }

});

최하위는 ->submitHandler 내부에 AJAX를 통해 게시 형태의 jQuery를 검증 자신의 mechansim를 사용합니다.

출처

2015-01-14 06:49:21

나는 그것을 시도하지만 작동하지 않았다 –

'didnt work'는 의미합니까? 브라우저 방화범의 NET 패널을 확인 했습니까? 어떤 오류가 발생합니까? 양식의 유효성이 양호합니까? 그렇다면 아약스 호출이 적절하게 진행됩니까? HTML 붙여 넣기 –

양식 유효성 검사는 괜찮지 만 내 데이터 게시는 불가능합니다. –

-1

이 당신을 도울 수 ...

<form id="myForm"> 
    <input type="text" name="name" /> 
    <br /> 
    <input type="text" name="school" /> 
    <br /> 
    <input type="submit" id="BTNTest" /> 
</form> 
<div id="result"></div> 

<script> 
    $(document).ready(function() { 

     $("#myForm").validate({ 
      onkeyup: false, 
      rules: { 
       name: { 
        required: true, 
        minlength: 5 
       }, 
       school: { 
        required: true, 
        minlength: 5 
       } 
      } 
     }); 

     event.preventDefault(); 
     $("#result").html(''); 
     var values = $(this).serialize(); 

     $(document).on('click', '#BTNTest', function() { 
      $.ajax({ 
       url: "add_admin.php", 
       type: "post", 
       data: values, 
       beforeSubmit: function() { 
        return $("#myForm").valid(); 
       }, 
       success: function() { 
        //alert("success"); 
        $("#result").html('Submitted successfully'); 
       }, 
       error: function() { 
        //   alert("failure"); 
        $("#result").html('There is error while submit'); 
       } 
      }); 
     }); 
    }); 

</script>

출처

2015-01-14 10:10:24 mzh

번 [jQuery Validate plugin 문서에 따라] (http://jqueryvalidation.org/validate/#submithandler),'ajax'는'submitHandler' 옵션 안에 속합니다. 'ajax'를'click' 핸들러 안에두면, 디폴트로 validation 플러그인이 어떻게 작동하는지 방해하게됩니다. – Sparky

DOM 준비 이벤트 핸들러 함수 안에'$ (this) .serialize()'와'event.preventDefault()'가 있습니다. 전혀 의미가 없습니다. – Sparky

Ajax 및 Jquery 유효성 확인을 사용하여 양식을 제출하는 방법은 무엇입니까?

답변

관련 문제