jQuery驗證器插件+ ajax提交不起作用

Question

我使用bassistance.de中的jQuery驗證器插件（1.11）並通過php提交。 現在我已經在提交處理程序的javacript代碼結尾處添加了ajax調用，但是調用不起作用，對於螢火蟲控制檯也不存在。

CASE 1如果我把ajax調用放在網站的開頭，它可以工作，但是驗證器插件不再被看到。

CASE 2如果我把提交處理程序中的調用，它不存在，表單由php提交。

CASE 3如果我把代碼放在頁面的最後，聯繫表格仍然由php提交。

這裏的Ajax調用：

$("#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; 
}); 

任何人知道什麼是錯的？

在此先感謝您的幫助，我正在爲此努力奮鬥。

編輯爲了更好地理解這個問題，以下是完整的javascript

$(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; 
}); 
    }, 

}); 

}); 

EDIT 2個

的選擇和所有其餘的看起來的要罰款。

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

Answer 1

你的ajax所屬的裏面submitHandler jQuery Validate插件的回調函數。

As per docs，

submitHandler，回調，默認值：默認值（本機）的形式提交

回調處理實際當表單是 有效提交。獲取表單作爲唯一的參數。替換默認的 提交。 通過Ajax提交表格的正確地點 驗證。

您的其他問題是您要撥打.validate()兩次。在第一次調用它之後，另一個實例將被忽略，您嘗試傳入的所有規則也會被忽略。當DOM準備好時，.validate()方法被調用一次，初始化您的窗體上的插件。

最後，您不需要將submit處理程序放入submitHandler回調函數中。

DEMO：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 
     } 
    }); 

}); 

Answer 2

您必須將代碼放入文檔就緒回調函數中，以確保DOM（您的表單）在之前被加載。

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

你要刪除現有.submit()從submitHandler，並把它驗證初始化之外，但裏面ready。然後在submitHandler裏面，您只能撥打form.submit(); 隨着form.submit();您觸發submit，另一個被解僱。

或者您將$.ajax直接放入submitHandler。

您現在這樣做的方式，您只需在點擊提交按鈕時添加事件偵聽器。那實際上到了晚了。直接後，您的表單被提交沒有Ajax。

Answer 3

這是很容易。只有這樣做

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

here set the ajax 

}