表单验证在 Blazor 3.1 中不起作用

Question

我正在使用 EF 将数据保存在数据库中，到目前为止，农场工作正常并保存了数据，但是当我尝试添加验证以形成它时它不起作用并且不显示任何错误消息或在数据库中保存任何数据。

工作和非工作代码示例。

下面的代码没有验证

Employee.cs

using System.ComponentModel.DataAnnotations;

    namespace BlazorSPA1.Data
    {
        public class Employee
        {
            [MaxLength(50)]
            public string Id { get; set; }
    [MaxLength(50)]
            public string Name { get; set; }

    [MaxLength(50)]
            public string Department { get; set; }
            [MaxLength(100)]
            public string Designation { get; set; }
            [MaxLength(100)]
            public string Company { get; set; }
            [MaxLength(100)]
            public string City { get; set; }
        }
    }

AddEmployee.razor

@page "/addemployee"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService

<h2>Create Employee</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">Department</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">Designation</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">Company</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label for="City" class="control-label">City</label>
                <input for="City" class="form-control" @bind="@employee.City" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CreateEmployee" value="Save" />
                <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
            </div>
        </div>
    </div>
</form>

@code {

    Employee employee = new Employee();

    protected async Task CreateEmployee()
    {
        await EmployeeService.CreateEmployee(employee);
        NavigationManager.NavigateTo("listemployees");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}   

在我进行验证更改后无法运行的代码

Employee.cs

using System.ComponentModel.DataAnnotations;
namespace BlazorSPA1.Data
{
    public class Employee
    {
        [MaxLength(50)]
        public string Id { get; set; }

        [Required]
        [StringLength(20)]
        public string Name { get; set; }

        [Required]
        [StringLength(20)]
        public string Department { get; set; }
        [MaxLength(100)]
        public string Designation { get; set; }
        [MaxLength(100)]
        public string Company { get; set; }
        [MaxLength(100)]
        public string City { get; set; }
    }
}

AddEmployeeValidation.razor

@page "/addemployeeValidation"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService

<h2>Create Employee</h2>
<hr />
<EditForm Model="@employee" OnValidSubmit="@CreateEmployee">
    <DataAnnotationsValidator />
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">Name</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
                <ValidationMessage For="@(()=> employee.Name)" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">Department</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">Designation</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">Company</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label for="City" class="control-label">City</label>
                <input for="City" class="form-control" @bind="@employee.City" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" value="Save" />
                <input type="button" class="btn" @onclick="@Cancel" value="Cancel" />
            </div>
        </div>
    </div>
</EditForm>

@code {

    Employee employee = new Employee();

    protected async Task CreateEmployee()
    {
        await EmployeeService.CreateEmployee(employee);
        NavigationManager.NavigateTo("listemployees");
    }


    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}   

我在这个例子中使用下面的代码示例 https://www.c-sharpcorner.com/article/visual-studio-extension-for-blazor-spa-with-ef-core-3-1/

当我添加验证代码时，它会打开添加员工页面，但没有任何反应没有验证消息没有表单提交甚至没有数据保存在数据库中。不知道问题出在哪里

Answer 1

我犯了一个没有引起注意的小错误，当我将输入类型更改为submit时，验证开始工作

 <input type="button" class="btn btn-primary" value="Save" />

正确

   <input type="submit" class="btn btn-primary" value="Save" />