Jquery验证不起作用.Jquery-Javascript

Jquery validation is not working. Jquery - Javascript

本文关键字:Jquery-Javascript 不起作用 验证 Jquery      更新时间:2023-09-26

我的问题是使用Jquery验证我的表单。我的验证仅使用validate函数运行良好,但后来我添加了submit选项,验证没有进行。我想验证我的表单,然后执行提交。

$(document).ready(function () {
    $('#ReqCreateForm').validate({
         invalidHandler: function (e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1
                ? 'Missing 1 field'
                : 'Missing fields';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        onkeyup: false,
        highlight: function (element) {
            $(element).addClass('error');
        }, unhighlight: function (element) {
            $(element).removeClass('error');
        }
    });
    $('#ReqCreateForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                alert("All Great!");
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
            }
        });
        return false;
    });
});

提前感谢。

解决方案:

解决方案非常简单。在$.ajax之前,将以下代码添加到我的提交选项中。

  if (!$(this).valid()) {
         return false;
    }

您必须调用提交按钮的点击处理程序上的有效函数,如下所示:

if($('#ReqCreateForm').valid())
{
    //then do your thing
}

我使用这个插件来使用Ajax提交表单。它有一个名为onbeforesubmit的事件,在这里您可以毫无问题地调用验证。也许你想试试。在你的情况下,你需要在向ajax调用提交数据之前捕捉事件,以便验证它(如果你不想使用我建议的插件)