Question

我使用来自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">

Answer 1

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

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

}

jQuery验证器插件+ ajax提交无法正常工作

3 个答案: