jQuery form.validate() 콜백 실패 ($ .ajax)

현재 HTML 양식에 문제가 있습니다. 양식 (규칙은 HTML 5 코드에 있음)의 유효성을 검사하고 $ .ajax 호출을 사용하여 처리 할 PHP 스크립트에 제출합니다. 목표는 제출하기 전에 다양한 필드가 채워 졌는지 확인하고, ajax를 사용하여 추가 오류 (사용자 존재, 사용중인 이메일, 웹 개발자는 단정 한 것 등)를 인쇄하는 것입니다. 그렇지 않으면 모든 것이 작동하면 폼을 숨기고 확인 메시지를 표시합니다.

아래 코드를 사용하면 유효성 검사가 올바르게 수행되지만 $ .ajax 호출은 수행되지 않습니다. 양식의 기본 동작이 발생합니다. 그러나 유효성 검사 함수와 그 submitHandler (및 닫는 중괄호)를 주석 처리하면 양식 제출이 정상적으로 작동합니다. 나는 며칠 동안 이것을 상대로 운이 좋지 않은 머리를 때렸다. 누구든지 제공 할 수있는 도움이나 통찰력이 있으면 크게 감사하겠습니다.

이것은 내가 실행중인 javascript입니다.

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#Submit").click(function() { 

     $("#mrf").validate({ 
      submitHandler: function() { 
        // Begin the submit handler function 
        var action = $("#mrf").attr('action'); 
        var msg_success = '<p style="font-weight: bold;">Your registration was successful! You should receive a welcome email shortly.</p>'; 
        var form_data = { 
         Surname: $("#Surname").val(), 
         First_Name: $("#FirstName").val(), 
         Other_Names: $("#OtherNames").val(), 
         Address: $("#Address").val(), 
         Suburb: $("#Suburb").val(), 
         State: $("#State").val(), 
         Postcode: $("#Postcode").val(), 
         Email: $("#Email").val(), 
         Username: $("#Username").val(), 
         INSTEP: $("#INSTEP").val(), 
         Mobile: $("#Mobile").val(), 
         Cohort: $("#Cohort").val(), 
         Academy: $("input:radio[name=Academy]:checked").val(), 
         University: $("#University").val(), 
         Program: $("#Program").val(), 
         NonUni: $("#NonUni").val(), 
         Mentoring: $("input:checkbox[name=Mentoring]:checked").val(), 
         CAS: $("input:checkbox[name=CAS]:checked").val(), 
         Motivational_Speaking: $("input:checkbox[name=MotivationalSpeaking]:checked").val(), 
         Workshops: $("input:checkbox[name=Workshops]:checked").val(), 
         Tutoring: $("input:checkbox[name=Tutoring]:checked").val(), 
         Newsletter: $("input:checkbox[name=Newsletter]:checked").val(), 
         is_ajax: 1 
        }; 

        $.ajax({ 
         type: "post", 
         url: action, 
         data: form_data, 
         success: function(response) { 
          if(response == 'success') { 
           $("#mrf-form").slideUp('slow', function() { 
            $("#ajaxResponse").html(msg_success); 
           }); 
          } 
          else { 
           $('#ajaxResponse').html("<p class='error'>" + response + "</p>"); 
          } 
         } 
        }); 
        // End the submit handler function  
       } 
     }); 

     return false; 
    }); 

}); 
</script>

출처

2012-05-01 Dorgrin

메이크업이

e.preventDEfault();

기능의 첫 번째 행

$("#Submit").click(function(e){});

이어야 기본 이벤트가 늘 해고 제출이 와트; 그들은 다음 오류를 가지고 것이다 경우 자바 스크립트가 실행하고 기본 기능은 "F12"을 개발자 도구를 사용하여
즉이 작업을 수행 할 수 호출됩니다 제출 중단 때문에 는 $.ajax({
위의 모든 라인에 오류가 있는지 확인합니다. 양식 데이터의 모든 값이 올바르게 채워 졌는지 확인하십시오.

출처

2012-05-01 09:18:08

제안 해 주셔서 감사합니다. Firebug를 사용하여 스크립트를 디버깅했으며, 오류가 에서 발생했다는 것을 확인했습니다. submitHandler : function() {' 가능한 한 단계를 밟았으며 jquery 라이브러리의이 코드로 이동합니다. 'jQuery .event.dispatch.apply (eventHandle.elem, arguments) : undefined; ' 어느 지점에서 실행이 중지 되었는가? (편집 내용을 주석 처리 한 경우 기본 제출 기능이 호출되었습니다). 이 문제를 어떻게 해결해야할지 모르겠다. 구문 오류라고 생각 하나? 양식 데이터가 전달되지 않았습니다. 나는 계속 볼거야. – Dorgrin

도움이 되니 기뻤습니다 :) 이것이 당신의 대답이었습니다. –

질문에 대한 직접적인 대답은 아니지만 유효성 검사 플러그인을 사용하는 것이 더 쉬울 수도 있습니다. 내가 이것을 사용하고 나는 매우 행복 해요, 그것은 간단하고 아직 확장 그리고 그것은 클라이언트 측에서 잘 보이는 당신이 그것을 필요로하는 경우는 국제화 지원이 :

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

는, 만약 그런 말로 미루어을 사용자 정의 코드를 사용하여이를 수행하려고한다면 submitHandler 함수가 false을 리턴하게 할 수 있습니다. 이미 데이터를 제출하고 있으므로 해당 작업을 실행하고 싶지 않습니다.

출처

2012-05-01 09:18:25 alexg

jQuery form.validate() 콜백 실패 ($ .ajax)

답변

관련 문제