How to replace native validation with custom validation

How to replace native validation with custom validation

I'm already up and running with a custom validation rule, but something odd is going on. First I'll show my code. Here's my input element: 

  1.     <table>
  2.         <tr>
  3.             <td class="colLeft">
  4.                 <label asp-for="Email" class="control-label"></label>
  5.                 <input asp-for="Email" class="form-control" />
  6.             </td>
  7.             <td class="colRight">
  8.                 <span asp-validation-for="Email" class="text-danger Email"></span>
  9.              </td>
  10.        </tr>

And my validation code:

  1. <script>
  2.            $(function () {
  3.                $.validator.addMethod("IsValidEmail", function (value, element) {
  4.                    var emailRegEx = new RegExp(/^[+a-zA-Z0-9._-]+@@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);

  6.                    return emailRegEx.test(value);
  7.                }, "Invalid Email.");

  9.                $("#mytForm").validate({
  10.                    rules: {
  11.                        FirstName: {
  12.                            required: true
  13.                        },
  14.                        LastName: {
  15.                            required: true
  16.                        },
  17.                        Email: {
  18.                            required: true,
  19.                            IsValidEmail: true
  20.                        }
  21.                    },
  22.                    errorPlacement: function (error, element) {
  23.                        var input = element.attr("id")
  24.                        
  25.                        error.appendTo($("." + input));
  26.                    }
  27.                });
  28.            });
  29.        </script>

This actually works, but something very odd happens when I test it. If I submit the form with the field empty, I get the generic "This field is required." message. If I start typing in the field after that, I get the following message: "Please enter a valid email address." Notice that is NOT my custom message for email validation. So here's where the weird part comes in. If I keep typing, and enter something like "asdf@aol" THEN my validation message suddenly replaces the default message. 

I rolled my own custom email validation, because jQuery's email validation will validate email entries like "someone@aol", without a domain included. Since this is NOT a valid email, that wasn't sufficient for the project I'm working on. 

It's obvious that the native jQuery email validation is running until I type some characters, a single "@" sign, and then a single valid character after that. Then my validation takes over. This is most certainly not what I want. I want to REPLACE the email validation, not build on top of it. 

Presently I've changed my custom error message to match the default invalid email message jQuery provides, so the message doesn't change while the user types. While this works, if I need to use my own custom validation messages, I'd be out of luck. Any suggestions?