Semantic/Foundation/Bootstrap Validation

Question

Hi

 

How we can implement any of the above validations or like below link with the given code

 

https://www.dotnetcurry.com/jquery/1168/validate-form-jquery-bootstrap-validator

<table class= "table table-striped table-bordered" style="width:100%" id="tblLocation">
<thead>
<tr>
@*<th><input type="checkbox" id="checkall" /></th>*@
<th>
Id
</th>
<th>
Description
</th>
<th>
IsActive
</th>
<th>Action</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
</table>
<script src="~/Scripts/Appjs/Location.js"></script>
<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="PType">Product Type</label>
<div class="col-sm-2">
<input type="text" class="form-control form-control-sm" id="txtPType" placeholder="Product Type">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<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>

function Add() {
var res = validate();
if (res == false) {
return false;
}
var objLocation = {
Id: $('#txtId').val().toUpperCase(),
Description: $('#txtDescription').val().toUpperCase(),
IsActive: $('#txtIsActive').val().toUpperCase()
};
$.ajax({
url: "/Location/Add",
data: JSON.stringify(objLocation),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) {
//loadData();
$('#tblLocation').DataTable().ajax.reload();
$.notify(data.message, {
globalposition: "top center",
//position:"center",
className:"success"
})
$('#myModal').modal('hide');
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error");
$("#msgModalBody").html('Status : ' + xhr.status + ' Error : ' + thrownError);
$("#msgModal").modal('show');
//
}
});
}

Thanks