提交Ajax之前的jQuery表单验证

Question

JavaScript位：

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });

            })
    });

HTML位：

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

这就是我要使用的代码。我的想法是在使用Ajax发送表单之前，先验证所有输入。我现在已经尝试过许多版本，但是每次即使表单没有完全填写，最终还是要提交。我所有的输入都是“必需”类的。谁能看到我做错了吗？

另外，由于我的输入名称是用php生成的，因此我依赖于基于类的要求，因此我永远无法确定自己获得的名称或输入类型。

我在“页面”中显示/隐藏问题。

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

JS：

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }

Answer 1

您可以使用该submitHandler选项。基本上将$.ajax调用放入此处理程序中，即使用验证设置逻辑将其反转。

$('#form').validate({

    ... your validation rules come here,

    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {
                $('#answers').html(response);
            }            
        });
    }
});

该jQuery.validate插件会调用如果验证通过了提交处理。