jQuery validator 플러그인 + ajax 제출이 작동하지 않음

jQuery validator 플러그인 + ajax 제출이 작동하지 않음

저는 bassistance.de 의 jQuery validator 플러그인(1.11)을 사용하며 php를 통해 제출합니다.이제 JavaScript 코드 끝에 제출 처리기에 Ajax 호출을 추가했지만 호출이 작동하지 않으며 Firebug 콘솔에 대한 호출도 없습니다.

사례 1 사이트 시작 부분에 Ajax 호출을 넣으면 작동하지만 validator 플러그인은 더 이상 표시되지 않습니다.

CASE 2 만약 내가 제출 핸들러 안에 통화를 넣는다면, 그것은 존재하지 않고 양식은 php에 의해 제출됩니다.

CASE 3 페이지 끝에 코드를 넣더라도 연락처 양식은 여전히 php에 의해 제출됩니다.

아약스의 전화입니다.

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').html("<div id='message'></div>");
            $('#message').html("<h2>Your request is on the way!</h2>")
            .append("<p>someone</p>")
            .hide()
            .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='images/ok.png' />");
            });
        }
     });
     return false;
});

무슨 일인지 아는 사람?

도움을 주셔서 미리 감사드립니다. 머리를 싸매고 있습니다.

편집 문제를 더 잘 이해하기 위해, 여기 완전한 자바스크립트가 있습니다.

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#contactform").validate({

     ignore: ":hidden",
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        cognome: {
            required: true,
            minlength: 3
        },
        subject: {
            required: true,

        },



        message: {
            required: true,
            minlength: 10
        }
    },

    submitHandler: function(form) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').html("<div id='message'></div>");
        $('#message').html("<h2>Your request is on the way!</h2>")
        .append("<p>someone</p>")
        .hide()
        .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/ok.png' />");
        });
    }
    });
    return false;
 });
    },

});

 });

편집 2

셀렉터와 나머지는 모두 괜찮은 것 같습니다.

 <form action="#n" class="active" method="post" name="contactform" id="contactform">

당신의.ajax내부에 속함submitHandlerjQuery Validate 플러그인의 콜백 함수입니다.

문서에 따르면,

submitHandler, 콜백, 기본값: 기본(기본) 양식 제출

양식이 유효할 때 실제 제출을 처리하기 위해 콜백합니다.형식을 유일한 인수로 가져옵니다.기본 제출을 바꿉니다.유효성 확인 후 Ajax를 통해 양식을 제출할 수 있는 올바른 위치.

당신의 또 다른 문제는 당신이 전화하고 있다는 것입니다..validate()두 번. 첫 번째로 호출된 후에 다른 인스턴스는 무시되고 전달하려는 모든 규칙도 무시됩니다..validate()폼에서 플러그인을 초기화할 준비가 되면 메서드가 한 번 호출됩니다.

마지막으로, 당신은 그것을 넣을 필요가 없습니다.submit로의 핸들러.submitHandler콜백 함수입니다.

데모: http://jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });

DOM(사용자 양식)이 이전에 로드되었는지 확인하기 위해 코드를 문서 준비 콜백에 넣어야 합니다.

$(document).ready(function() {
 //Code
});

기존 시스템을 제거해야 합니다..submit()에서submitHandler유효성 검사 초기화 외부에서 내부에 배치합니다.ready그다음에 안에.submitHandler전화만 하는 당신form.submit();와 함께form.submit();너가 트리거submit그러면 다른 하나는 해고됩니다.

또는 당신이 당신의$.ajax에 직접.submitHandler.

지금은 제출 단추를 클릭할 때만 이벤트 수신기를 추가합니다.그건 사실 너무 늦었어요.그 직후에 Ajax 없이 양식이 제출됩니다.

그것은 쉽답니다.이 작업만 수행

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}

언급URL : https://stackoverflow.com/questions/15625195/jquery-validator-plugin-ajax-submitting-not-working