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.

score 0 · Accepted Answer · answered Nov 24 '22 at 09:42

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

Thanks. But my problem is not actually this. I want to ensure that the form is valid (in front end) before sending that ajax. — , Nov 24 '22 at 10:07
Hi @Matin mohammadi, Check the code i provided in js, I add '$('#Form').validate();' method and only `$('#Form').valid() === true` can send ajax, or it will show error message . — Xinran Shen, Nov 24 '22 at 11:43
Hello again. I've tried that before. But it gave me error: Uncaught TypeError: $(...).validate is not a function at SubmitForm (VM85 site.js:91:16) at HTMLButtonElement.onclick (EditProfile:101:65) — , Nov 24 '22 at 16:36
This error means your jquery validation plugin are not loaded correctly. I have tested the above code and it works well. — Xinran Shen, Nov 25 '22 at 01:19

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

1 Answers1