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();
}
