小编典典

提交Ajax之前的jQuery表单验证

ajax

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();
        }

阅读 291

收藏
2020-07-26

共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插件会调用如果验证通过了提交处理。

2020-07-26