jQuery + jQuery表单提交插件+ jQuery验证插件 [英] jQuery + jQuery Form Submit Plugin + jQuery Validation Plugin

问题描述

背景：我试着创建一个提交表单的表单使用Ajax（jQuery Form Submit）。我已经工作得很好，然后我想要在表单上进行验证。我可以使用jQuery Form Validation Plugin工作。但我似乎无法让他们一起工作。

基本上它只是提交表单天气或不是有效的。

我希望这是简单的。你能看到这个问题吗？

  $（'＃addCompany'）。submit（function（）{
 $（'＃addCompany'）。ajaxSubmit（{
 target：'.response'，
 beforeSubmit：validateForm，
 success：function（）{
 $（'。response' ）.fadeIn（'slow'）; 
} 
}）; 
 
}）; // END SUBMIT FUNCTION 
}）; //结束文档
 
函数validateForm（）{
 $（＃addCompany）。validate（{
 rules：{
 company：required，
 contactEmail：required
}，
 messages：{
 company：请输入客户公司，
 contactEmail：请输入一个有效的电子邮件地址， 
} 
}）; 
 
  

解决方案

。请参阅示例。在你的情况，它应该是：

  $（＃addCompany）。validate（{
 rules：{ 
 company：required，
 contactEmail：required
}，
 messages：{
 company：请输入客户公司，
 contactEmail：请输入一个有效的电子邮件地址，
}，
 submitHandler：function（form）{
 $（form）.ajaxSubmit（{
 target：'.response' ，
 success：function（）{
 $（'。response'）。fadeIn（'slow'）; 
} 
}）; 
} 
}）; 
  

I realize this has been asked a few times, but wondering if you can help my situation out.

Background: I've tried to create a form that submits using Ajax (jQuery Form Submit). Which I have gotten to work fine, and then I wanted to get validation on the form. Which I was able to get to work using jQuery Form Validation Plugin. But I cannot seem to get them to work together.

Basically it just submits the form weather or not it's "valid".

I'm hoping it is something simple. Are you able to see the issue?

$('#addCompany').submit(function() { 
    $('#addCompany').ajaxSubmit({
        target:        '.response',   
            beforeSubmit:  validateForm,   
        success:       function () {
            $('.response').fadeIn('slow');
        }
     }); 

    });  //END SUBMIT FUNCTION
  }); //END DOCUMENT

  function validateForm() {
        $("#addCompany").validate({
            rules: {
                company: "required",
                contactEmail: "required"
                },
             messages: {
                company: "Please enter the clients company",
                                contactEmail: "Please enter a valid email address",
                   }
        });
    }

解决方案

You doing it in wrong order. See the example here. In your case, it should be:

$("#addCompany").validate({
  rules: {
    company: "required",
    contactEmail: "required"
  },
  messages: {
    company: "Please enter the clients company",
    contactEmail: "Please enter a valid email address",
  },
  submitHandler: function(form) {
    $(form).ajaxSubmit({
      target: '.response',   
      success: function() {
        $('.response').fadeIn('slow');
      }
    });
  }
});

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