Razor Pages model attribute not being enforced on client-side validation

Question

I am new to razor pages and trying to extend the funtionality of a Microsoft tutorial sample by creating a sign-up page that stores user information.

However, I am running into the problem where some data annotation attributes are not being enforced.

Model:

public class CoreUser
{
    [Key]
    public int UserId { get; set; }

    [DisplayName("User Name")]
    [Required]
    [StringLength(24, MinimumLength = 8)]
    [RegularExpression("\\w*")]
    public string UserName { get; set; }

    [DisplayName("Password")]
    [Required]
    [DataType(DataType.Password)]
    [StringLength(24, MinimumLength = 8)]
    [RegularExpression("[\\w]*[\\W]")]
    public string Password { get; set; }
    public UserGroup Group { get; set; }
}

My simple sign-up page

<h1 style="text-align:center">Sign up</h1>
<div class="login">
    <form method="post">
        <div class="form-group">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <label asp-for="currentUser.UserName" class="control-label formLabel"></label>
            <input asp-for="currentUser.UserName" class="form-control" />
            <span asp-validation-for="currentUser.UserName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="currentUser.Password" class="control-label"></label>
            <input asp-for="currentUser.Password" class="form-control" />
            <span asp-validation-for="currentUser.Password" class="text-danger"></span>
        </div>
        <div class="form-group submitDiv">
            <input type="submit" value="Sign up"class="btn btn-primary" />
        </div>
    </form>
</div>

My pagemodel:

public class SignUpModel : PageModel
{
    private readonly PermissionContext UserLookUp;

    public SignUpModel(PermissionContext user)
    {
        UserLookUp = user;
    }

    [BindProperty]
    public CoreUser currentUser { get; set; }

    public IActionResult OnGetAsync()
    {
        return Page();
    }

    public async Task<IActionResult> OnPostAsync()
    {
        CoreUser exisintUser = UserLookUp.Users.AsNoTracking().FirstOrDefault(user => user.UserName == currentUser.UserName);
        if(exisintUser == null) {
            UserLookUp.Users.Add(currentUser);
            await UserLookUp.SaveChangesAsync();
        }
        else
        {
            //to do, show invalid message on front-end
        }

        return RedirectToPage("../Index");

    }
}

[DisplayName] and [DataType] are both being enforced. However, [Required] [StringLength] and [RegularExpression] are not being enforced.

What do I need help with:

What did I do wrong? how do I enforce those missing attributes?

Answer 1

credit to @Dimitris Maragkos

What I actually needed it to make it work

Add the following script at the end of my cshtml file.

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