Validation messages not clearing with resetForm() or $("#myForm")[0].reset()

I'm trying to understand how input validation works. In the HTML below, btnconfirm triggers the validation errors and resetForm resets the form.

resetForm clears the input boxes, but doesn't clear the validation messages.

The first validation of "username" works, but the message is not shown (ie. I don't want a popup).

The only one that works is the second one, but it doesn't clear with "Reset".

@page
@model Products.Pages.IndexModel
@{
    //var product = Model.product;
}
@Html.AntiForgeryToken()

    <form id="myForm">

        <input type="text" id="username" required/>
        <label for="username">Username required</label>
        <br />

        <input type="text" id="firstname" name="firstname" data-val="true" data-val-required="First Name REQUIRED">
        <span data-valmsg-for="firstname" data-valmsg-replace="true"></span>
        <br />

        <input type="text" id="lastname" name="lastname" required>
        <span for="lastname">last name required</span>
        <br />

        <button id="btnconfirm" class="button" type="submit">Check inputs</button>
            <input type="reset" id="resetForm" value="Reset">
    </form>

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

    <script>
        $("#resetForm").click(function(){
            var validator = $( "#myForm" ).validate();
            validator.resetForm();

            $("#myForm")[0].reset();

            alert("reset");
        });
    </script>
}

If you only want to validate inputs you can use jquery.validate method. Here is a working code. If you do not define any error description inside

data-val-required attibute then it shows field is required otherwise it will show provided error. jquery.validate.min.js and jquery.validate.unobtrusive.min.js are working with attribute and showing errors.

<form id="myForm">
            
            <input type="text" id="username" name="username" required />
            <span class="field-validation-valid" data-valmsg-for="username" data-valmsg-replace="true"></span>
            <br />
        
            
            <input type="text" id="firstname" name="firstname" data-val="true" data-val-required="First Name REQUIRED">
            <span class="field-validation-valid" data-valmsg-for="firstname" data-valmsg-replace="true"></span>
            <br />
        
            
            <input type="text" id="lastname" name="lastname" required>
            <span class="field-validation-valid" data-valmsg-for="lastname" data-valmsg-replace="true"></span>
            <br />
        
            <button id="btnconfirm" class="button" type="submit">Check inputs</button>
            <input type="reset" id="resetForm" value="Reset">
        </form>
        
        @section Scripts {
            @{
                await Html.RenderPartialAsync("_ValidationScriptsPartial");
            }
        
            <script>
                $(document).ready(function() {
                    // Initialize the validator
                    var validator = $("#myForm").validate({
                        // Prevent the default error message popup
                        errorPlacement: function(error, element) {
                            error.appendTo(element.nextAll("span.field-validation-valid").first());
                        }
                    });
        
                    $("#resetForm").click(function(e) {
                        e.preventDefault();
                        validator.resetForm();
                        $("#myForm")[0].reset();
                        $(".field-validation-valid span").text('');
                    });
                });
            </script>
        }