For input field, change default invalid email validation message while keeping custom required field message?

I have an email input field that must not be empty and should also have a valid email address. With the actual code, the custom message Email cannot be empty is displayed as expected when the field is empty.

The issue is that when the email is invalid I get the default message Please enter a valid email address. The functionality is fine since the ajax call isn't triggered due to the invalid email, but I would like to display a custom invalid email message.

Any help is appreciated.

I checked a few solutions, including How to change default "please include an @ in the email address"? , Set custom HTML5 required field validation message, but none of them worked for me.

This is my input field:

<input id="email" type="email" name="email" data-val="true" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Invalid email address')" data-val-required="Email cannot be empty">&nbsp;<span style="font-size: smaller; color: red" data-valmsg-for="email" data-valmsg-replace="true"></span>

This is all my html:

@page
@model Products.Pages.IndexModel
@{
}
@Html.AntiForgeryToken()
    <form id="myForm">

    <input id="email" type="email" name="email" data-val="true" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Invalid email address')" data-val-required="Email cannot be empty">&nbsp;<span style="font-size: smaller; color: red" data-valmsg-for="email" data-valmsg-replace="true"></span>
                <button id="btnconfirm" class="button" type="submit">Confirm</button>
    </form>

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

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var elements = document.getElementsByTagName("email");
            for (var i = 0; i < elements.length; i++) {
                elements[i].oninvalid = function(e) {
                    e.target.setCustomValidity("");
                    if (!e.target.validity.valid) {
                        e.target.setCustomValidity("Invalid email address");
                    }
                };
                elements[i].oninput = function(e) {
                    e.target.setCustomValidity("");
                };
            }
            });

           $("#myForm").submit(function (event) {
                event.preventDefault(); // Prevent default form submission

                if ($("#myForm").valid()) {
                    $.ajax({
                        type: "POST",
                        url: "/Index?handler=Send",
                        success: function (response) {
                            alert('success');
                        }
                    });
                }
            });
    </script>
}

If your purpose is to display a custom invalid email message. you only need to add data-val-email="Custom messege" in input field. Here is the updated form.It works with jquery.validate.js and jquery.validate.unobtrusive.js.

<form id="myForm">

    <input id="email" type="email" name="email" data-val="true" data-val-required="Email cannot be empty" data-val-email="Please add valid email">&nbsp;<span style="font-size: smaller; color: red" data-valmsg-for="email" data-valmsg-replace="true"></span>
    <button id="btnconfirm" class="button" type="submit">Confirm</button>
</form>

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

    <script>
           $("#myForm").submit(function (event) {
                event.preventDefault(); // Prevent default form submission

                if ($("#myForm").valid()) {
                    $.ajax({
                        type: "POST",
                        url: "/Index?handler=Send",
                        success: function (response) {
                            alert('success');
                        }
                    });
                }
            });
    </script>
}