Select type validate required not working in jsgrid

[chandranmanikandan82]

I am using country and state master with jsgrid in php mysql database, In state php call country master dropdown with country id name field and state name text field. Validate required syntax is not working in country_id field. The script is below. Appreciate anyone help this issue.
$(function() {
$.ajax({
type: "GET",
url: "countries_drop.php"
}).done(function(countries) {
countries.unshift({ Country_Id: "0", Country_Name: "" });
$('#States_table').jsGrid({

width: "100%",
height: "600px",

filtering: true,
inserting:true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
deleteConfirm: "Do you really want to delete data?",

controller: {
loadData: function(filter){
return $.ajax({
type: "GET",
url: "states.php",
data: filter
});
},
insertItem: function(item){
return $.ajax({
type: "POST",
url: "states.php",
data:item
});
},

updateItem: function(item){
return $.ajax({
type: "PUT",
url: "states.php",
data: item
});
},
deleteItem: function(item){
return $.ajax({
type: "DELETE",
url: "states.php",
data: item
});
},
},

fields: [
{
autosearch: true,
name: "Country_Id",
title: "Country",
type: "select",
width: 100,
items: countries,
valueField: "Country_Id",
textField: "Country_Name" ,
align: "left",
//selectedIndex: -1,
validate: "required"
},
{
name: "State_Id",
type: "hidden",
css: 'hide'
},
{
name: "State_Name",
type: "text",
width: 150,
validate: "required"
},
{
type: "control"
}
]

});
});

});

I tried to insert state name without country code selection showing blank in the inserted row for country field, so i want to validate country selection before insert the record by user