17

我使用来自 bassistance.de 的 jQuery 验证器插件（1.11）并通过 php 提交。现在我在 javacript 代码末尾的提交处理程序中添加了一个 ajax 调用，但是该调用不起作用，firebug 控制台也不存在。

案例 1如果我将 ajax 调用放在网站的开头，它可以工作，但不再看到验证器插件。

案例 2如果我将调用放在提交处理程序中，它不存在并且表单是由 php 提交的。

案例 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;
 });
    },

});

 });

编辑 2

选择器和其他所有似乎都很好。

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

3 回答 3

37

您ajax属于jQuery Validate插件的submitHandler回调函数。

根据文档，

submitHandler，回调，默认：默认（本机）表单提交

回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

你的另一个问题是你打.validate()了两次电话。第一次调用后，另一个实例将被忽略，您尝试传递给它的所有规则也将被忽略。该方法在 DOM 准备好初始化表单上的插件.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
         }
     });

 });
于 2013-03-25T22:12:52.160 回答
2

您必须将代码放入文档就绪回调中，以确保之前加载了 DOM（您的表单）。

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

您必须从 中删除现有.submit()的submitHandler并将其放在验证初始化之外但在ready. 然后在submitHandler你只调用form.submit(); With form.submit();you triggersubmit中，然后触发另一个。

或者你把你的$.ajax直接放入submitHandler.

您现在执行此操作的方式，您只需在单击提交按钮时添加事件侦听器。那实际上为时已晚。之后，您的表单将在没有 ajax 的情况下直接提交。

于 2013-03-25T21:38:38.323 回答
2

这很容易。只做这个

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

here set the ajax

}
于 2015-05-27T08:00:21.540 回答