jsGrid中Select类型字段required验证失效问题求助

你的问题出在默认添加的空选项上——你给countries数组加了{ Country_Id: "0", Country_Name: "" }，而jsGrid默认的"required"验证只会检查字段是否为空值，但"0"属于非空字符串，所以验证会直接通过，达不到强制选择国家的效果。

直接把validate: "required"换成自定义验证函数即可，具体修改如下：

修改后的核心代码片段 #

把Country_Id字段配置里的validate: "required"替换为：

validate: function(value) {
    // 检查选中的Country_Id是否为默认的"0"，是则验证失败
    if (value === "0") {
        return "请选择一个国家";
    }
    return true;
}

完整修改后的JS代码 #

$(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: function(value) {
                       if (value === "0") {
                           return "请选择一个国家";
                       }
                       return true;
                   }
               },
               {
                   name: "State_Id",
                   type: "hidden",
                   css: 'hide'
               },
               {
                   name: "State_Name", 
                   type: "text", 
                   width: 150, 
                   validate: "required"
               },
               {
                   type: "control"
               }
           ]

       });
    });
});

效果说明 #

现在当你尝试不选择国家（即选中默认的空选项）进行插入或编辑时，jsGrid会弹出自定义的错误提示，阻止提交操作；只有选择了有效的国家（Country_Id不为"0"）时，才能正常提交数据。

内容的提问来源于stack exchange，提问作者Chandran Manikandan