ASP.NET Core表单AJAX提交时JQuery验证失效问题求助

问题描述 #

在ASP.NET Core项目中使用自带的JQuery Unobtrusive Validation实现无刷新表单验证，正常提交表单时验证功能正常，但改用AJAX提交并调用preventDefault()手动处理提交流程后，验证功能失效——即使表单存在错误仍会执行AJAX提交。尝试使用JQuery的valid()和validate()函数时出现报错，需要可行的验证方案。

相关代码 #

CSHTML文件代码 #

@page
@model Baunity.Web.Pages.Dash.EditProfileModel

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

<p id="verificationAlert" style="display: none !important;" class="alert alert-success">text</p>

@section Scripts {
    @{
        await Html.RenderPartialAsync ("_ValidationScriptsPartial");
    }
}

<form method="post">
    <input asp-for="Email" />
    <label asp-for="Email"></label>
    <span asp-validation-for="Email"></span>

    <br />

    <input asp-for="Username" />
    <label asp-for="Username"></label>
    <span asp-validation-for="Username"></span>

    <br />

    <input asp-for="Password" />
    <label asp-for="Password"></label>
    <span asp-validation-for="Password"></span>

    <br />

    <input asp-for="ConfirmPassword" />
    <label asp-for="ConfirmPassword"></label>
    <span asp-validation-for="ConfirmPassword"></span>

    <br />

    <input asp-for="FirstName" />
    <label asp-for="FirstName"></label>
    <span asp-validation-for="FirstName"></span>

    <br />

    <input asp-for="LastName" />
    <label asp-for="LastName"></label>
    <span asp-validation-for="LastName"></span>

    <br />

    <div id="verificationForm" style="display: none !important;">
        <input asp-for="VerificationCode" />
        <label asp-for="VerificationCode"></label>
        <span asp-validation-for="VerificationCode"></span>
    </div>

    <div asp-validation-summary="ModelOnly"></div>

    <br />

    FIX DOING OTHER STUFF LIKE SETTING VALUES AT BACKEND

    <input type="submit" id="submit" onclick="SubmitForm(this.parentElement, event)" />
</form>

<p>@ViewData["DONE"]</p>

site.js代码 #

let isVerificationEmailSent = false;

function SubmitForm(frm, caller) {
    debugger;

    if (!isVerificationEmailSent) {
        caller.preventDefault();
    }
    else {
        return;
    }

    var fdata = new FormData();

    var emailData = $('#Email').val();
    fdata.append("Email", emailData);

    var usernameData = $('#Username').val();
    fdata.append("Username", usernameData);

    var passwordData = $('#Password').val();
    fdata.append("Password", passwordData);

    var confirmPasswordData = $('#ConfirmPassword').val();
    fdata.append("ConfirmPassword", confirmPasswordData);

    var firstNameData = $('#FirstName').val();
    fdata.append("FirstName", firstNameData);

    var lastNameData = $('#LastName').val();
    fdata.append("LastName", lastNameData);

    let isSuccess = true;

    $.ajax(
        {
            type: frm.method,
            url: frm.action,
            headers:
            {
                "XSRF-TOKEN": $("input[name='__RequestVerificationToken']").val()
            },
            data: fdata,
            processData: false,
            contentType: false,
            statusCode: {
                912: function (responseObject, textStatus, jqXHR) {
                    $("#verificationForm").show();
                    $("#verificationAlert").show();
                    isVerificationEmailSent = true;
                },
            },
            success: function (data) {
                alert(data);
                isSuccess = true;
            },
            error: function (data) {
                if (!isSuccess) {
                    alert('ERROR' + data);
                }
            }
        })
}

解决方法 #

1. 手动触发并检查表单验证 #

在AJAX提交前，手动触发表单验证并检查验证结果，只有验证通过才执行AJAX请求。修改SubmitForm函数：

function SubmitForm(frm, caller) {
    debugger;

    if (!isVerificationEmailSent) {
        caller.preventDefault();
        
        // 初始化并触发验证
        const $form = $(frm);
        $form.validate(); // 确保验证器已初始化
        if (!$form.valid()) {
            return; // 验证不通过，终止后续流程
        }
    } else {
        return;
    }

    // 简化FormData创建，直接从表单获取所有数据
    var fdata = new FormData(frm);

    let isSuccess = true;

    $.ajax(
        {
            type: frm.method,
            url: frm.action,
            headers:
            {
                "XSRF-TOKEN": $("input[name='__RequestVerificationToken']").val()
            },
            data: fdata,
            processData: false,
            contentType: false,
            statusCode: {
                912: function (responseObject, textStatus, jqXHR) {
                    $("#verificationForm").show();
                    $("#verificationAlert").show();
                    isVerificationEmailSent = true;
                },
            },
            success: function (data) {
                alert(data);
                isSuccess = true;
            },
            error: function (data) {
                if (!isSuccess) {
                    alert('ERROR' + data);
                }
            }
        })
}

2. 验证脚本检查 #

确保_ValidationScriptsPartial中正确引用了以下两个核心脚本：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

这两个脚本是ASP.NET Core自带表单验证的基础，缺失会导致验证功能无法正常工作。

3. 验证错误自动显示 #

当调用$form.valid()时，JQuery Unobtrusive Validation会自动将错误信息渲染到页面上对应的asp-validation-for和asp-validation-summary标签中，无需额外编写错误显示逻辑。

内容的提问来源于stack exchange，提问作者user17476959