Javascript function to validate form by ASP.NET Core Jquery validation

Question

I'm trying to validate an ASP.NET Core form without refreshing the page by ASP.NET Core JQuery validation (the one provided in the project). The validation is working properly when I post the form normally. But I want to post the form with AJAX, so I run the preventDefault() js function to do the submission manually by ajax. But it seems that this function is breaking the validation (The one that works without refresh). It means that even if the form has errors, it submits!

This is my cshtml file:

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

I've tried to use valid() & validate() function in jquery, but it gave me error. I want a method similar to these two.

Answer 1

If you don't wanna use submit button to submit the form, Why do you set the type="submit"? You can just set the button like:

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

In this case, You don't need to use event.preventDefault() anymore.

set an id for the form:

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

Then in your js code:

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