How to implement Client Side Validation

Question

Hi

Below is the Modal Popup . How to implement Client side Validation

@using (Html.BeginForm("CreateEdit", "Location", FormMethod.Post))
{
<input type="hidden" id="hfAU" name="hfAU" value="A"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="Id">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control form-control-sm" id="txtId" name="Id" placeholder="Id">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="Description">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control form-control-sm" id="txtDescription" name="Description" placeholder="Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="IsActive">Active</label>
<div class="form-check col-sm-2">
<input class="form-check-input" type="checkbox" id="IsActive" name="IsActive">
</div>
</div>
</div>
</div>

            <div class="modal-footer">  
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>  
                <button type="submit" class="btn btn-primary">Save Changes</button>  
            </div>  
        </div>  
    </div>  
</div>  

}

---

public class Location
{
public Location()
{
}

   [Key]  
   [Display(Name = "Id")]  
   public string Id { get; set; }  
 
   [DataType(DataType.Text)]  
   [RegularExpression(@"^[a-zA-Z'.\s]{1,25}$", ErrorMessage = "Special Characters not allowed")]  
   [Required(ErrorMessage = "Please enter Location"), MaxLength(25)]  
   [Display(Name = "Description")]  
   public string Description { get; set; }  
 
   [Required]  
   public bool IsActive { get; set; }  

}

Thanks

Answer 1

When bootstrap opens the modal, for it to display correctly, it moves it to the end of the body. This causes the inputs to be outside the form. Move the form and hidden field to inside the modal. Then you can use standard validation.

Answer 2

Hi @Jagjit Saini ,

ASP.NET MVC supports client-side validation using jQyery. You need to take a reference of two javascript files from the Scripts folder.

1. jquery.validate.min.js
2. jquery.validate.unobtrusive.min.js

You can use the HTML Helper method ValidationMessageFor() to display the error message of the specified field.

Also, if you use modal, there is one more step at this time: add the form to the page, and then manually register the form.

• Code $.validator.unobtrusive.parse("#myModal");
• If you are directly on a page, you only need to cite the files mentioned above.

I wrote an example, you can refer to it.

Model

    public class Location  
    {  
        [Key]  
        [Display(Name = "Id")]  
        [Required]  
        public string Id { get; set; }  
        [DataType(DataType.Text)]  
        [RegularExpression(@"^[a-zA-Z'.\s]{1,25}$", ErrorMessage = "Special Characters not allowed")]  
        [Required(ErrorMessage = "Please enter Location"), MaxLength(25)]  
        [Display(Name = "Description")]  
        public string Description { get; set; }  
        [Required]  
        public string IsActive { get; set; }  
    }  

Controller

    public class ClientSideValidationController : Controller  
    {  
        public ActionResult Index()  
        {  
            return View();  
        }  
  
        public ActionResult TestPartialView()  
        {  
            return PartialView("_TestPartialView");  
        }  
        [HttpPost]  
        public ActionResult CreateEdit(Location model)  
        {  
            if (ModelState.IsValid)  
            {  
  
            }  
            return RedirectToAction("Index");  
        }  
    }  

Index View

• You can click this link to download and view the code.

_TestPartialView

@model WebApplication8.Models.Location  
<div class="form-horizontal">  
    <div class="form-group">  
        <label class="control-label col-sm-3" for="Id">Id</label>  
        <div class="col-sm-9">  
            @Html.TextBoxFor(m => m.Id, new { @class = "form-control form-control-sm", placeholder = "Id" })  
            @Html.ValidationMessageFor(m => m.Id, "", new { @class = "text-danger" })  
        </div>  
    </div>  
    <div class="form-group">  
        <label class="control-label col-sm-3" for="Description">Description</label>  
        <div class="col-sm-9">  
            @Html.TextBoxFor(m => m.Description, new { @class = "form-control form-control-sm", placeholder = "Description" })  
            @Html.ValidationMessageFor(m => m.Description, "", new { @class = "text-danger" })  
        </div>  
    </div>  
    <div class="form-group">  
        <label class="control-label col-sm-3" for="IsActive">Active</label>  
        <div class="form-check col-sm-9">  
            @Html.TextBoxFor(m => m.IsActive, new { @class = "form-control form-check-input" })  
            @Html.ValidationMessageFor(m => m.IsActive, "", new { @class = "text-danger" })  
        </div>  
    </div>  
</div>  

---

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best Regards,
YihuiSun