通过ASP.NET核心Jquery验证来验证表单的Javascript函数

b4wnujal  于 2022-11-26  发布在  .NET
关注(0)|答案(1)|浏览(151)

我正在尝试通过ASP.NET核心JQuery验证来验证ASP.NET核心表单,而不刷新页面(项目中提供的)。当我正常发布表单时,验证工作正常。但我想用 AJAX 发布表单,所以我运行了preventDefault()js函数通过 AJAX 手动进行提交。但似乎此函数破坏了验证(不刷新即可工作)。这意味着即使表单有错误,它也会提交!
这是我的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);
                }
            }
        })
}

我试过在jquery中使用valid()validate()函数,但是它给了我错误。我想要一个类似于这两个的方法。

bzzcjhmw

bzzcjhmw1#

如果你不想使用submit button来提交表单,为什么要设置type="submit"呢?你可以设置如下按钮:

<button type="button" onclick="SubmitForm(this.parentElement)">submit</button>

在这种情况下,你不需要使用event.preventDefault()了.
设置表单的ID:

<form method="post" Id="Form">...</form>

然后在js代码中:

let isVerificationEmailSent = false;

function SubmitForm(frm) {

    $('#Form').validate();

  if ($('#Form').valid() === true) {
     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);
                }
            }
        })
    }
}

相关问题