英文:
How can I create a form with validation in ASP.NET MVC?
问题
I am having problems with my submit form. For some reason when I submit the correct answers it gives me error messages for the input. It submits and returns the view with error messages and the text boxes are empty. I want the error messages to disappear once I have entered the correct input.
This is my view:
<form method="post">
<!-- form validations -->
<div class="row mb-2">
<h2 class="display-4 c-title">Send Us a Message</h2>
<hr class="my-4">
<!-- Gets the first name -->
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.Name" class="form-label">First Name</label>
<input type="text" asp-for="@Model.Name" class="form-control" id="firstNm" name="firstNmLabel" placeholder="First Name">
<span class="text-danger" asp-validation-for="@Model.Name"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.LastName" class="form-label">Last Name</label>
<input type="text" asp-for="@Model.LastName" class="form-control" id="lastNm" name="LastNmLabel" placeholder="Last Name">
<span class="text-danger" asp-validation-for="@Model.LastName"></span>
</div>
<!-- Get -->
</div>
<div class="row mb-3">
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.PhoneNumber" class="form-label">Phone</label>
<!-- as for help in the input -->
<input type="text" asp-for="@Model.PhoneNumber" class="form-control" id="phoneNum" name="phoneNum" placeholder="111-111-1111">
<span class="text-danger" asp-validation-for="@Model.PhoneNumber"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" asp-for="@Model.Email" class="form-control" id="inputEmail" name="inputEmail" aria-describedby="emailHelp" placeholder="Enter email">
<span class="text-danger" asp-validation-for="@Model.Email"></span>
</div>
</div>
<!-- Collects address -->
<div class="row mb-3">
<div>
<label asp-for="@Model.Address" class="form-label">Street Address</label>
<input type="text" asp-for="@Model.Address" class="form-control" id="street" name="street">
<span class="text-danger" asp-validation-for="@Model.Address"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.City" class="form-label">City</label>
<input type="text" asp-for="@Model.City" class="form-control" id="city" name="city" placeholder="City">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.State" class="form-label">State</label>
<input type="text" asp-for="@Model.State" class="form-control" id="state" name="state" placeholder="State" />
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.PostalCode" class="form-label">Zip</label>
<input type="text" asp-for="@Model.PostalCode" class="form-control" id="zip" name="zip" placeholder="Zip">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<!-- try to put a line here so it separates. -->
<!-- Collects information about us -->
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.Service" class="form-label">What service are you requesting?</label>
<!-- check if I can add the asp-for in here. -->
<select class="form-select" id="services" name="services" asp-for="@Model.Service">
<option value="">Please choose a service</option>
<option value="Inspection">Inspection</option>
<option value="New Roofing">New Roofing</option>
<option value="Roof Repair">Roof Repair</option>
<option value="Siding">Siding</option>
<option value="Gutters">Gutters</option>
<option value="Soffit and Fascia">Soffit and Fascia</option>
<option value="Commercial roof">Commercial roof</option>
</select>
<span class="text-danger" asp-validation-for="@Model.Service"></span>
</div>
<div class="col-md-6 mb-3">
<label asp-for="@Model.HearAboutUs" class="form-label">How did you hear about us?</label>
<select class="form-select" id="hearUs" name="hearUs" asp-for="@Model.HearAboutUs">
<option value="">-Select-</option>
<option value="Internet Search">Internet Search</option>
<option value="Internet Ad">Internet Ad</option>
<option value="Direct Mail">Direct Mail</option>
<option value="Yard Sign">Yard Sign</option>
<option value="Social Media">Social Media</option>
<option value="Referral">Referral</option>
</select>
</div>
</div>
<!-- This gets a lot of text -->
<div class="row mb-3">
<div class="form-group">
<label asp-for="@Model.Message" class="form-label">Message</label>
<textarea class="form-control" asp-for="@Model.Message" id="message" rows="5" name="message"></textarea>
</div>
</div>
<!-- Button to submit information -->
<div class="row mb-3">
<div class="col-12">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
</form>
This is my model:
using System.ComponentModel.DataAnnotations;
namespace NewOriginConstruction.Models
{
public class SendMail
{
[Required]
public string? Name { get; set; }
public string? LastName { get; set; }
[Required, EmailAddress]
public string? Email { get; set; }
[Required]
[RegularExpression(@"^\d
<details>
<summary>英文:</summary>
I am having problems with my submit form. For some reason when I submit the correct answers it gives me error messages for the input. It submits and returns the view with error messages and the text boxes are empty. I want the error messages to disappear once I have enter the correct input.
This is my view:
<form method="post">
<!--form validations-->
<div class="row mb-2">
<h2 class="display-4 c-title">Send Us a Message</h2>
<hr class="my-4">
<!--Gets the first name-->
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.Name" class="form-label">First Name</label>
<input type="text" asp-for="@Model.Name" class="form-control" id="firstNm" name="firstNmLabel" placeholder="First Name">
<span class="text-danger" asp-validation-for="@Model.Name"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.LastName" class="form-label">Last Name</label>
<input type="text" asp-for="@Model.LastName" class="form-control" id="lastNm" name="LastNmLabel" placeholder="Last Name">
<span class="text-danger" asp-validation-for="@Model.LastName"></span>
</div>
<!--Get-->
</div>
<div class="row mb-3">
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.PhoneNumber" class="form-label">Phone</label>
<!--as for help in the input-->
<input type="text" asp-for="@Model.PhoneNumber" class="form-control" id="phoneNum" name="phoneNum" placeholder="111-111-1111">
<span class="text-danger" asp-validation-for="@Model.PhoneNumber"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" asp-for="@Model.Email" class="form-control" id="inputEmail" name="inputEmail" aria-describedby="emailHelp" placeholder="Enter email">
<span class="text-danger" asp-validation-for="@Model.Email"></span>
</div>
</div>
<!--Collects address--->
<div class="row mb-3">
<div>
<label asp-for="@Model.Address" class="form-label">Stree Address</label>
<input type="text" asp-for="@Model.Address" class="form-control" id="street" name="street">
<span class="text-danger" asp-validation-for="@Model.Address"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.City" class="form-label">City</label>
<input type="text" asp-for="@Model.City" class="form-control" id="city" name="city" placeholder="City">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.State" class="form-label">State</label>
<input type="text" asp-for="@Model.State" class="form-control" id="state" name="state" placeholder="State" />
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.PostalCode" class="form-label">Zip</label>
<input type="text" asp-for="@Model.PostalCode" class="form-control" id="zip" name="zip" placeholder="Zip">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<!--try to put a line here so it separates.-->
<!--Collects information about us-->
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.Service" class="form-label">What service are you requesting?</label>
<!--check if I can add the asp-for in here.--->
<select class="form-select" id="services" name="services" asp-for="@Model.Service">
<option value="">Please chose a service</option>
<option value="Inspection">Inspection</option>
<option value="New Roofing">New Roofing</option>
<option value="Roof Repair">Roof Repair</option>
<option value="Siding">Siding</option>
<option value="Gutters">Gutters</option>
<option value="Soffit and Fascia">Soffit and Fascia</option>
<option value="Commercial roof">Commercial roof</option>
</select>
<span class="text-danger" asp-validation-for="@Model.Service"></span>
</div>
<div class="col-md-6 mb-3">
<label asp-for="@Model.HearAboutUs" class="form-label">How did you hear about us?</label>
<select class="form-select" id="hearUs" name="hearUs" asp-for="@Model.HearAboutUs">
<option value="">-Select-</option>
<option value="Internet Search">Internet Search</option>
<option value="Internet Ad">Internet Ad</option>
<option value="Direct Mail">Direct Mail</option>
<option value="Yard Sign">Yard Sign</option>
<option value="Social Media">Social Media</option>
<option value="Referral">Referral</option>
</select>
</div>
</div>
<!--This get a lot of text--->
<div class="row mb-3">
<div class="form-group">
<label asp-for="@Model.Message" class="form-label">Message</label>
<textarea class="form-control" asp-for="@Model.Message" id="message" rows="5" name="message"></textarea>
</div>
</div>
<!--Button to submit information------------------------------------------------------------------>
<div class="row mb-3">
<div class="col-12">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
</form>
This is my model:
using System.ComponentModel.DataAnnotations;
namespace NewOriginConstruction.Models
{
public class SendMail
{
[Required]
public string? Name { get; set; }
public string? LastName { get; set; }
[Required, EmailAddress]
public string? Email { get; set; }
[Required]
[RegularExpression(@"^\d{3}-\d{3}-\d{4}$", ErrorMessage = "Please enter a valid phone number in the format XXX-XXX-XXXX.")]
public string? PhoneNumber { get; set; }
[Required]
public string? Address { get; set; }
public string? City { get; set; }
public string? State { get; set; }
public int PostalCode { get; set; }
[Required]
public string? Service { get; set; }
public string? HearAboutUs { get; set; }
public string? Message { get; set; }
}
}
Lastly this is my controller:
[HttpPost]
public ActionResult Contact(SendMail sendMail)
{
if (!ModelState.IsValid)
return View();
//
return View();
}
</details>
# 答案1
**得分**: 1
a. 输入字段的“name”值应与模型名称匹配。
例如：
"name"="**Email**"
<input type="email" asp-for="@Model.Email" class="form-control" id="Email" name="**Email**" aria-describedby="emailHelp" placeholder="Enter email">
b. 在控制器方法中将模型发送回视图。
**return View(sendMail);**
c. 从必填字段中删除了“?”。*这是可选的*
以下是工作代码：
**第一个更改**
```csharp
public class SendMail
{
[Required]
public string Name { get; set; }
public string? LastName { get; set; }
[Required, EmailAddress]
public string Email { get; set; }
[Required]
[RegularExpression(@"^\d{3}-\d{3}-\d{4}$", ErrorMessage = "Please enter a valid phone number in the format XXX-XXX-XXXX.")]
public string PhoneNumber { get; set; }
[Required]
public string Address { get; set; }
public string? City { get; set; }
public string? State { get; set; }
public int PostalCode { get; set; }
[Required]
public string Service { get; set; }
public string? HearAboutUs { get; set; }
public string? Message { get; set; }
}
第二个更改
[HttpPost]
public ActionResult Contact(SendMail sendMail)
{
if (!ModelState.IsValid)
return View(sendMail);
return View();
}
第三个更改
<form method="post">
<!--表单验证-->
<div class="row mb-2">
<h2 class="display-4 c-title">Send Us a Message</h2>
<hr class="my-4">
<!--获取名字-->
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.Name" class="form-label">First Name</label>
<input type="text" asp-for="@Model.Name" class="form-control" id="name" name="name" placeholder="First Name">
<span class="text-danger" asp-validation-for="@Model.Name"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.LastName" class="form-label">Last Name</label>
<input type="text" asp-for="@Model.LastName" class="form-control" id="lastname" name="lastname" placeholder="Last Name">
<span class="text-danger" asp-validation-for="@Model.LastName"></span>
</div>
<!--获取电话号码-->
</div>
<div class="row mb-3">
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.PhoneNumber" class="form-label">Phone</label>
<!--as用于在输入中提供帮助-->
<input type="text" asp-for="@Model.PhoneNumber" class="form-control" id="PhoneNumber" name="PhoneNumber" placeholder="111-111-1111">
<span class="text-danger" asp-validation-for="@Model.PhoneNumber"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" asp-for="@Model.Email" class="form-control" id="Email" name="Email" aria-describedby="emailHelp" placeholder="Enter email">
<span class="text-danger" asp-validation-for="@Model.Email"></span>
</div>
</div>
<!--收集地址-->
<div class="row mb-3">
<div>
<label asp-for="@Model.Address" class="form-label">Stree Address</label>
<input type="text" asp-for="@Model.Address" class="form-control" id="street" name="Address">
<span class="text-danger" asp-validation-for="@Model.Address"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.City" class="form-label">City</label>
<input type="text" asp-for="@Model.City" class="form-control" id="city" name="city" placeholder="City">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.State" class="form-label">State</label>
<input type="text" asp-for="@Model.State" class="form-control" id="state" name="state" placeholder="State" />
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.PostalCode" class="form-label">Zip</label>
<input type="text" asp-for="@Model.PostalCode" class="form-control" id="zip" name="PostalCode" placeholder="Zip">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<!--尝试在此处添加一行以分隔。-->
<!--收集关于我们的信息-->
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.Service" class="form-label">What service are you requesting?</label>
<!--检查是否可以在此处添加asp-for。-->
<select class="form-select" id="services" name="Service" asp-for="@Model.Service">
<option value="">Please chose a service</option>
<option value="Inspection">Inspection</option>
<option value="New Roofing">New Roofing</option>
<option value="Roof Repair">Roof Repair</option>
<option value="Siding">Siding</option>
<option value="Gutters">Gutters</option>
<option value="Soffit and Fascia">Soffit and Fascia</option>
<option value="Commercial roof">Commercial roof</option>
</select>
<span class="text-danger" asp-validation-for="@Model.Service"></span>
</div>
<div class="col-md-6 mb-3">
<label asp-for="@Model.HearAboutUs" class="form-label">How did you hear about us?</label>
<select class="form-select" id="hearUs" name="HearAboutUs" asp-for="@Model.HearAboutUs">
<option value="">-Select-</option
<details>
<summary>英文:</summary>
I have done following changes
a. The 'name' value of the input fields should match with Model name.
eg.
"name"="**Email**"
<input type="email" asp-for="@Model.Email" class="form-control" id="Email" name="**Email**" aria-describedby="emailHelp" placeholder="Enter email">
b. Send the model back to the view in the controller method.
**return View(sendMail);**
c. Removed the '?' from the required fields. *This is optional*
Below is the working code:
**1st change**
public class SendMail
{
[Required]
public string Name { get; set; }
public string? LastName { get; set; }
[Required, EmailAddress]
public string Email { get; set; }
[Required]
[RegularExpression(@"^\d{3}-\d{3}-\d{4}$", ErrorMessage = "Please enter a valid phone number in the format XXX-XXX-XXXX.")]
public string PhoneNumber { get; set; }
[Required]
public string Address { get; set; }
public string? City { get; set; }
public string? State { get; set; }
public int PostalCode { get; set; }
[Required]
public string Service { get; set; }
public string? HearAboutUs { get; set; }
public string? Message { get; set; }
}
**2nd change**
[HttpPost]
public ActionResult Contact(SendMail sendMail)
{
if (!ModelState.IsValid)
return View(sendMail);
return View();
}
**3rd change**
<form method="post">
<!--form validations-->
<div class="row mb-2">
<h2 class="display-4 c-title">Send Us a Message</h2>
<hr class="my-4">
<!--Gets the first name-->
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.Name" class="form-label">First Name</label>
<input type="text" asp-for="@Model.Name" class="form-control" id="name" name="name" placeholder="First Name">
<span class="text-danger" asp-validation-for="@Model.Name"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.LastName" class="form-label">Last Name</label>
<input type="text" asp-for="@Model.LastName" class="form-control" id="lastname" name="lastname" placeholder="Last Name">
<span class="text-danger" asp-validation-for="@Model.LastName"></span>
</div>
<!--Get-->
</div>
<div class="row mb-3">
<div class="col-lg-6 col-sm-12">
<label asp-for="@Model.PhoneNumber" class="form-label">Phone</label>
<!--as for help in the input-->
<input type="text" asp-for="@Model.PhoneNumber" class="form-control" id="PhoneNumber" name="PhoneNumber" placeholder="111-111-1111">
<span class="text-danger" asp-validation-for="@Model.PhoneNumber"></span>
</div>
<div class="col-lg-6 col-sm-12">
<label for="inputEmail" class="form-label">Email address</label>
<input type="email" asp-for="@Model.Email" class="form-control" id="Email" name="Email" aria-describedby="emailHelp" placeholder="Enter email">
<span class="text-danger" asp-validation-for="@Model.Email"></span>
</div>
</div>
<!--Collects address--->
<div class="row mb-3">
<div>
<label asp-for="@Model.Address" class="form-label">Stree Address</label>
<input type="text" asp-for="@Model.Address" class="form-control" id="street" name="Address">
<span class="text-danger" asp-validation-for="@Model.Address"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.City" class="form-label">City</label>
<input type="text" asp-for="@Model.City" class="form-control" id="city" name="city" placeholder="City">
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.State" class="form-label">State</label>
<input type="text" asp-for="@Model.State" class="form-control" id="state" name="state" placeholder="State" />
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label asp-for="@Model.PostalCode" class="form-label">Zip</label>
<input type="text" asp-for="@Model.PostalCode" class="form-control" id="zip" name="PostalCode" placeholder="Zip">
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<!--try to put a line here so it separates.-->
<!--Collects information about us-->
<div class="row mb-3">
<div class="col-md-6 mb-3">
<label asp-for="@Model.Service" class="form-label">What service are you requesting?</label>
<!--check if I can add the asp-for in here.--->
<select class="form-select" id="services" name="Service" asp-for="@Model.Service">
<option value="">Please chose a service</option>
<option value="Inspection">Inspection</option>
<option value="New Roofing">New Roofing</option>
<option value="Roof Repair">Roof Repair</option>
<option value="Siding">Siding</option>
<option value="Gutters">Gutters</option>
<option value="Soffit and Fascia">Soffit and Fascia</option>
<option value="Commercial roof">Commercial roof</option>
</select>
<span class="text-danger" asp-validation-for="@Model.Service"></span>
</div>
<div class="col-md-6 mb-3">
<label asp-for="@Model.HearAboutUs" class="form-label">How did you hear about us?</label>
<select class="form-select" id="hearUs" name="HearAboutUs" asp-for="@Model.HearAboutUs">
<option value="">-Select-</option>
<option value="Internet Search">Internet Search</option>
<option value="Internet Ad">Internet Ad</option>
<option value="Direct Mail">Direct Mail</option>
<option value="Yard Sign">Yard Sign</option>
<option value="Social Media">Social Media</option>
<option value="Referral">Referral</option>
</select>
</div>
</div>
<!--This get a lot of text--->
<div class="row mb-3">
<div class="form-group">
<label asp-for="@Model.Message" class="form-label">Message</label>
<textarea class="form-control" asp-for="@Model.Message" id="message" rows="5" name="message"></textarea>
</div>
</div>
<!--Button to submit information------------------------------------------------------------------>
<div class="row mb-3">
<div class="col-12">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
</form>
</details>
# 答案2
**得分**: 1
您在提交数据时未执行客户端验证。当服务器后端验证数据时，会出现红色提示。这是预期的行为。
但是，如果启用了客户端验证，那么我们将无法直接提交表单，数据需要在前端进行验证，然后才能传递到后端。
因此，我认为没有直接的解决方案，只能使用JavaScript进行硬编码处理，如下所示：
[当用户在取消按钮被点击时取消一个用户无效的表单时，如何清除MVC客户端验证错误？][2]
[1]: https://andrewlock.net/adding-client-side-validation-to-aspnet-core-without-jquery-or-unobtrusive-validation/
[2]: https://stackoverflow.com/questions/2798427/how-do-i-clear-mvc-client-side-validation-errors-when-a-cancel-button-is-clicked
<details>
<summary>英文:</summary>
You did not perform client side validation when submitting data. When the server backend validates the data, a red prompt appears. This is the expected behavior.
But if [client side validation is enabled][1], then we will not be able to submit the form directly, and the data needs to be validated at the front end before it can be passed to the back end.
So I don't think there is a direct solution, only hardcoded processing using javascript. like below:
[How do I clear MVC client side validation errors when a cancel button is clicked when a user has invalidated a form?][2]
[1]: https://andrewlock.net/adding-client-side-validation-to-aspnet-core-without-jquery-or-unobtrusive-validation/
[2]: https://stackoverflow.com/questions/2798427/how-do-i-clear-mvc-client-side-validation-errors-when-a-cancel-button-is-clicked
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论