Leverage MVC Client-Side Validation when using Ajax Post - ajax

Question

It's my first asp.net mvc project and I am trying to build a view that displays a list of countries. on double click it changes the input from readonly to false to enable editing and on keypress or blur it saves the changes.
Now, server-side validation is working but client-side is not. I am not sure is it because I don't have a form tag or it can't be done or needs manual hook-ups.
CountryModel:
public class Country
{
[Key]
public int CountryId { get; set; }
[Required]
[MinLength(4)]
[MaxLength(60)]
[RegularExpression(#"^[a-zA-Z]+$", ErrorMessage = "Use letters only please")]
public string Name
{ get; set; }
}
Country Controller Action:
[HttpPost]
public ActionResult Save(Country country)
{
if (ModelState.IsValid)
{
db.Entry(country).State = EntityState.Modified;
db.SaveChanges();
//return
return Json("Success");
}
else
{
//return
return Json("Failed");
}
}
Country View:
#model IEnumerable<Models.Country>
<h2>Manage Countries</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
Options
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.EditorFor(modelItem => item.Name, new { htmlAttributes = new { #class = "grid-input", data_input_mode = "read", data_model_id = item.CountryId } })
#Html.ValidationMessageFor(modelItem => item.Name, "", new { #class = "text-danger" })
</td>
</tr>
}
</table>
Scripts.js
$(document).ready(function () {
$(".grid-input").attr("readonly", true);
$(".grid-input").dblclick(function () {
var elem = $(this);
if (elem.attr("data-input-mode") == "read") {
elem.attr("data-input-mode", "edit");
elem.removeAttr("readonly");
//Remove selection when mode changes from read to edit only
var sel = window.getSelection();
sel.removeAllRanges();
//bind blur and keypress to attempt saving data on focusout or enter press
elem.on("blur keypress", function (e) {
if (e.keyCode == 13 || e.type == "blur") {
//Stop Bubbling
e.stopImmediatePropagation();
//Enable Readonly To Avoid Edits While Saving
$(this).attr("data-input-mode", "read");
$(this).attr("readonly", "true");
//Get Country ID & Name
var _countryId = $(this).attr("data-model-id");
var _countryName = $(this).val();
//Validate
$.ajax({
url: '/Country/Save',
data: JSON.stringify({
country: {
CountryId: _countryId,
Name: _countryName
}
}),
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data == "Success") {
console.log("Saved!");
} else {
elem.attr("data-input-mode", "edit");
elem.removeAttr("readonly");
console.log("Error occurs on the Database level!");
}
},
error: function () {
console.log("An error has occured!!!");
}
});
}
});
}
});
});