Ajax提交之前的jQuery表单验证

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 生成的，所以我永远不能确定什么名字[id]或输入类型。

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

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

JS：

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

您可以使用 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插件将调用提交处理程序。

Ajax提交之前的jQuery表单验证

猜你在找的Ajax相关文章