jQuery Validator插件ajax提交未触发 [英] Jquery validator plugin ajax submition not triggering

问题描述

我的Jquery验证程序存在问题( http://bassistance.de/jquery-plugins/)插件的SubmitHandler函数.表单已正确验证，并且无效的处理程序消息已正确触发，但是submitHandler函数将无法正确触发，而ajaxSubmit函数也不会完全触发.有人看到我做错了吗?任何帮助都是最好的选择.

I have a problem with my the Jquery validator (http://bassistance.de/jquery-plugins/) plugins submitHandler function. The form is validated correctly and the invalid handler message triggers correctly, but the submitHandler functions will not trigger correctly and the ajaxSubmit function does not trigger corectly. Any one see what I have done wrong? Any help would be most wellcome.

<script type="text/javascript">
$(document).ready(function() {
var submitMessage     = $('#submit-message'),
    messageContainer  = submitMessage.find('span'),
    loading           = $('#loading');

function showSuccess(message) {
    messageContainer.text(message)
    messageContainer.attr('class', 'success');
  }
function showFailure(message) {
    messageContainer.text(message)
    messageContainer.attr('class', 'failure');
}
$("#contact-form-info").validate({
  rules: {
    contact_Name: {
      minlength: 2,
      maxlength: 50,
      required: true
    },
    contact_Foretag: {
      minlength: 1,
      maxlength: 50
    },
    contact_Email: {
      required: true,
      email: true
    },
    contact_Subject: {
      required: true,
      minlength: 5,
      maxlength: 50
    },
    contact_Message: {
      required: true,
      minlength: 10,
      maxlength: 5000
    }
  },
  submitHandler: function(form) {
        var options = {
            beforeSubmit: function() {
                loading.show();
            },
            success: function() {
                showSuccess('Thank you! Your email has been submitted.');
                form.reset();
                loading.hide();
            },
            error: function() {
                showFailure("We're sorry, your email could not be sent. Please try again later.");
                loading.hide();
            }
        };
        $(form).ajaxSubmit(options);
     return false;

    },
    invalidHandler: function() {
        showFailure('There were some problems with your submission.');
    }
 });
});
</script>

这是我在jsFiddle中的代码. http://jsfiddle.net/JwNmK/

Here is my code in jsFiddle. http://jsfiddle.net/JwNmK/

推荐答案

OP的评论:

"当我提交有效表格时，将其作为正常"表格提交， 重定向到process.php页面"

"when I submit a valid form it is submited as a 'normal' form, I am redirected to the process.php page"

使用ajax时，在submitHandler回调函数的末尾肯定需要一个return false.

You definitely need a return false at the end of your submitHandler callback function when using ajax.

submitHandler: function (form) {
    // your ajax
    return false;
},

这篇关于jQuery Validator插件ajax提交未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！