How to add custom form client-side validation in razor page and remove Chrome built-in validation

Question

I'm developing a web application using NET Core 3 razor pages, my Login.cshtml page looks as follows:

<div class="columns is-centered">
    <div class="column is-6">
        <div class="card auth-card">
            <div class="card-content">
                <div class="login-form is-grouped-centered">
                    <form method="post">
                        <p class="login-form__title subtitle">Sign In or Register</p>
                        <div class="login-form__field field">
                            <div class="login-form__email-group form-row">
                                <label class="login-form__email-label" asp-for="Input.Email">My Email</label>
                                <input class="login-form__input control input" asp-for="Input.Email" id="email-input" placeholder="john.doe@example.com" required maxlength="255" title=" " />
                                <span asp-validation-for="Input.Email" class="has-text-danger"></span>
                            </div>
                        </div>
                        <p class="login-form__title subtitle">Are you an Esencia customer?</p>
                        <div class="login-form__radio-group">
                            <input type="radio" class="login-form__radio-group-radio radio" @@click="disablePassword(true)" name="new_account" value="1" id="signin_new_customer">
                            <label for="signin_new_customer">No, sign me up.</label>
                        </div>
                        <div class="login-form__field login-form__radio-group">
                            <input type="radio" class="login-form__radio-group-radio radio" @@click="disablePassword(false)" name="new_account" value="0" id="signin_existing_customer" checked>
                            <label for="signin_existing_customer">Yes, my password is</label>
                            <div class="login-form__radio-group">
                                <input class="login-form__input control input" asp-for="Input.Password" id="auth-password" required />
                                <span asp-validation-for="Input.Password" class="has-text-danger"></span>
                            </div>
                        </div>
                        <div class="field has-text-right">
                            <a href="#">Forgotten your password?</a>
                        </div>
                        <div class="login-form__submit">
                            <input v-if="!isNewAccount" class="login-form__submit-button button is-success" type="submit" name="name" value="Sign In" />
                            <a v-if="isNewAccount" class="login-form__submit-button button is-success" asp-page="/Accounts/Register">Sign Up</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

And the model to which I am trying to add validation is:

public class LoginViewModel
{
    [Required(ErrorMessage = "The Email field is required")]    
    [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", ErrorMessage = "Please enter a valid email")]
    public string Email { get; set; }

    [Required(ErrorMessage = "The password field is required")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

For some reason this custom validation is not working, the errors are not being displayed in the designed span tag under the input fields, and I cannot get rid of this message (see image below) which I believe is chrome built-in error messages validation. It looks like the validation helper tag is not working at all. Can anyone give me a hand with this? I must be missing something. Thanks a lot in advance!

UPDATE: The chrome custom validation shows up when I add the "required" attribute in the HTML, if I remove it it goes away, the problem is the model validation is still not working and it allows the user to click "Sign In" button with the empty fields, leading to an error page by means its allowing to post the form which is totally wrong...

Answer 1

Client-side validation is not a security measure. It is easily bypassed by anyone who has access to the developer tools in the browser. For that reason, it is opt-in. You must include the validation scripts partial in your page:

@section scripts{
   <partial name="_ValidationScriptsPartial" />
}

https://www.learnrazorpages.com/razor-pages/validation#client-side-validation