使用 jquery.validate.js 和 jquery.form.js 提交 Ajax 表单？答案

【问题标题】：Ajax form submission with jquery.validate.js and jquery.form.js?使用 jquery.validate.js 和 jquery.form.js 提交 Ajax 表单？
【发布时间】：2012-04-15 17:47:24
【问题描述】：

我正在尝试通过将两种不同的 javascript 代码混合在一起来将我的 html 表单数据提交给servlet：

<script type="text/javascript">
        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    url: {
                        url: true
                    },
                    comment: {
                        required: true
                    }
                },
                messages: {
                    comment: "Please Enter Your Message."
                },
                submitHandler:function(login_form){
                    $(login_form).ajaxSubmit({
                        target: '#msg-box',
                        success: function() {
                            $('#form1').slideUp('slow', function(){
                                $(".show_hide").show();
                            });
                        }
                    });
                }
            });
        });
    </script>

第二个是（来自this教程）：

<script type="text/javascript">
$(document).ready(function(){
    $("#login_frm").submit(function(){

         //remove previous class and add new "myinfo" class
        $("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(1000);


        this.timer = setTimeout(function () {
            $.ajax({
                url: 'check.jsp',
                data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
                type: 'post',
                success: function(msg){
                    if(msg != 'ERROR') // Message Sent, check and redirect
                    {               // and direct to the success page

                        $("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
                          function()
                          {
                             //redirect to secure page
                             document.location='login.jsp?user='+msg;
                          });

                    }
                    else
                    {
                        $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
                        {
                          //add message and change the class of the box and start fading
                          $(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
                        });

                    }
                }

            });
        }, 200);
        return false;
    });     

});

  </script>

我不是 javascript 或 JQuery 忍者，请任何人帮助我将这些代码组合在一起..
一件事是肯定我必须对submitHandler 代码进行许多更改，但我正在尝试但没有成功。

P.S.：欢迎任何关于 jsp-jquery-ajax 表单验证和提交的更好想法

【问题讨论】：

删除了不相关的java标签。

标签： jquery ajax jquery-validate form-submit

【解决方案1】：

您的$.ajax 和$().ajaxSubmit 可以组合使用，因为它们通常采用相同的选项。

我会重构 $.ajax 使其成为 ajaxSubmit 的一部分。您可以摆脱 $.ajax 的 data: b/c ajaxSubmit 来处理它。 success: function() 是一回事。

对于您的setTimeout() 和removeClass()，您可以使用：beforeSubmit:，这与 $.ajax 的beforeSend: 相同

【讨论】：