Validation on Modal

Question

Hi

 

How to implement below Validation according to below Logic

 

 

 

public JsonResult List()
{
List<Location> listLocation = new List<Location>();
var res = dbLocation.GetAllLocation().ToList();
foreach (var item in res)
{
Location obj = new Location();
obj.Id = item.Id;
obj.Description = item.Description;
obj.IsActive = item.IsActive;
listLocation.Add(obj);
}
return Json(listLocation, JsonRequestBehavior.AllowGet);
}
public JsonResult Add(Location objLocation)
{
if (ModelState.IsValid)
{
dbLocation.Add(objLocation);
return Json(new { success = true, message="Saved Successfully"});
}
return Json(dbLocation);
}

Modal Popup

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();"> <i class= "fa fa-plus"></i> Add New</button><br /><br />
<table class="table table-striped table-bordered" style="width:100%" id="tblLocation">
<thead>
<tr>
<th>
ID
</th>
<th>
Description
</th>
<th>
Active
</th>
<th></th>
</tr>
</thead>
</table>
<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">Add New Location</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" 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" placeholder="Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="IsActive">Active</label>
<div class="col-sm-2">
<input type="text" class="form-control form-control-sm" id="txtIsActive" disabled placeholder="Active">
</div>
</div>
</div>
</div>
<div class="modal-footer">
@*<button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();"><span class="glyphicon glyphicon-ok"></span>Save</button>*@
<button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();">Save</button>
<button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

Thanks