使用 Blazor 处理数据注释

Question

    <EditForm Model="CurrentCustomerSubmission" OnValidSubmit="ToSubmissionPage">
        <DataAnnotationsValidator/>
        <div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">
            <form class="login100-form validate-form">
                <span class="login100-form-title p-b-59">
                    Sign Up
                </span>

                <div class="wrap-input100 validate-input" data-validate="First Name is required">
                    <span class="label-input100">First Name</span>
                    <input class="input100" type="text" name="firstName" placeholder="First Name..." @bind-value="@CurrentCustomerSubmission.customerFirstName" />
                    <span class="focus-input100"></span>
                </div>

From my Model class

public class CustomerModel
{
    [Required]
    [StringLength(20, ErrorMessage = "First Name too long (20 letter limit)")]

when I click submit on my form, no validation occurs and the form refreshes and all data is missing.

Answer 1

The EditForm component is rendered as Html form, but alas your markup contains another form tag. I guess the issue lays here... You shouldn't embed a form within a form...