在使用easyui-combogrid时,由于html解析出的格式是如下三层:

<td>
<input id="txcombo" class="easyui-combogrid combogrid-f combo-f" value="" style="width: 200px; height: 28px; display: none;" comboname="tx">

<span class="combo" style="width: 198px; height: 26px;">

<input type="text" class="combo-text validatebox-text validatebox-invalid" autocomplete="off" readonly="readonly" title="" style="cursor: pointer; width: 176px; height: 26px; line-height: 26px;">

<span>

<span class="combo-arrow" style="height: 26px;">

</span>

</span>

<input type="hidden" class="combo-value" name="tx" value=""></span>

</td>

注意到最外层的display:none,所以直接在样式中添加required="required"是不起作用的娥,而真正提交的input却是hidden。

第一层是一个display:none的下拉数据表格框;

第二层是一个validate-box,验证框;

第三层是一个显示属性为hidden,隐藏的文本框。

选择一项下拉值后发现,第一层的value,值为空,第三层的文本框值却不为空。那么问题就出现在第一层,因为它自动解析了一个display:none,同时我又在页面添加了必填属性,required:true,但是它又没有拿到值,所以就是那个报错的原因:一个隐藏的必填项为空。

前台html代码是自动解析的,无法更改,也就意味着无法去掉display:none属性,那么只能去掉必填属性,required:true.但是需求中又明确要求必填,那么只能在js中试试,是否能够识别必填属性:

/*********下拉数据表格*******/
$('#tx').combogrid({
panelWidth: 700,
panelHeight:500,
idField: 'value',
textField: 'value',
url:'getTx.do',
method: 'post',
fit: false,
fitColumns: false,
required: true,
editable:false,
columns: [[
{field:'value',title:'value'},
{field:'note',title:'note',align:'left'}
]],

onLoadSuccess:function(){ //修改页加载表格数据
$('#tx').combogrid('setValue', '${dto.tx}');
}
}

});

测试发现,无论是否有值,都会提示必填。这说明必填属性起作用了,但是这个框没有拿到值。那么此时的隐藏项就只剩下最后一层了,那个type=”hidden”的文本框,这样问题就简单多了,在下拉框选中值之后,将下拉框的值手动赋给这个文本框:

/*********下拉数据表格*******/
$('#tx').combogrid({
panelWidth: 700,
panelHeight:500,
idField: 'value',
textField: 'value',
url:'getTx.do',
method: 'post',
fit: false,
fitColumns: false,
required: true,
editable:false,
columns: [[
{field:'value',title:'value'},
{field:'note',title:'note',align:'left'}
]],

onLoadSuccess:function(){ //修改页加载表格数据
$('#tx').combogrid('setValue', '${dto.tx}');
},

onClickRow:function(index,row){ 
$('#tx').val(row.value); //下拉数据表格的第一层的input框赋值,否则不能作为必填项提交
}
}

});

注意到此处的方法onClickRow:function(index,row)是数据表格的方法,那么easyui-combogrid继承自easyui-datagrid和easyui-combo,它同时也继承了datagrid和combo的方法,所以此处可以直接用。

easyui-combogrid必填为空时无法通过表单验证的问题的更多相关文章

  1. atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

    atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...

  2. atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  3. atitit.表单验证 的dsl 本质跟 easyui ligerui比较

    atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

  5. 仿照easy-ui并改进的表单验证

    概述 easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证.后台验证.远程异步验证等,这些功能要解决起来是比较吃力的.我仿照它的样式,写了一套前端表单验证的validB ...

  6. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

  7. PHP表单验证内容是否为空

    内容为空效果图为: 填写内容效果图: 下面是验证程序的代码: <!doctype html> <html> <head> <meta http-equiv=& ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单

    系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...

  9. 扩展easyui 的表单验证 (转)

    From:http://www.cnblogs.com/gengaixue/archive/2012/07/14/2591054.html easyui 的validatebox()提供了自定义验证的 ...

随机推荐

  1. weexpack 创建项目, 打包Android 和 ios

    1: 首先确保 node.js版本大于6.0, 不然使用 weexpack 时会报错(部分使用es6语言,node版本太低不支持es6) 下面所有都是命令行执行的命令 2: 全局安装 weexpack ...

  2. docker制作共享jdk的tomcat镜像

    FROM centos:7.4.1708 #挂载宿主机jdk到容器,节省空间 MAINTAINER huqiang:2018/10/12 ENV VERSION=8.5.34 ENV CATALINA ...

  3. window.onload中调用函数报错的问题

    今天练习js,忽然遇到了一个问题,就是window.onload加载完成后,调用其中的函数会报错, 上一段简单的代码: 报错信息: 报错原因: 当window.onload加载完成后,第一个alert ...

  4. 使用POI 读取 Excel 文件,读取手机号码 变成 1.3471022771E10

    使用POI 读取 Excel 文件,读取手机号码 变成 1.3471022771E10 [问题点数:40分,结帖人xieyongqiu]             不显示删除回复             ...

  5. 【BZOJ4327】[JSOI2012] 玄武密码(AC自动机的小应用)

    点此看题面 大致题意: 给你一个长度为\(len\)的文本串和\(n\)个模式串,让你求出每一个模式串的前缀与文本串的最大匹配串长度(其中模式串和文本串都只由字符'E','S','W','N'组成). ...

  6. 【洛谷1967】货车运输(最大生成树+倍增LCA)

    点此看题面 大致题意: 有\(n\)个城市和\(m\)条道路,每条道路有一个限重.多组询问,每次询问从\(x\)到\(y\)的最大载重为多少. 一个贪心的想法 首先,让我们来贪心一波. 由于要求最大载 ...

  7. Matlab 中实用数据结构之 containers.Map

    概要   熟悉 Python 的都知道字典 Dict 类型数据结构功能的强大,Matlab 中虽然有表结构,但是其列名必须是亦变量名类型的字符串,如果我想用数字开头的字符串作键值,其表结构就无能为力了 ...

  8. 交叉验证(Cross Validation)方法思想简介

      以下简称交叉验证(Cross Validation)为CV.CV是用来验证分类器的性能一种统计分析方法,基本思想是把在某种意义下将原始数据(dataset)进行分组,一部分做为训练集(train ...

  9. 事件流,事件对象和jQuery

    事件流 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流” 例子:html代码: <div cl ...

  10. 在DOS界面下快速进入目录的技巧

    在DOS界面如果想进入某一目录还是比较困难的,尤其是有长目录名和中文目录名的时候. 比如:要进入“D:/工具箱/杀毒软件”这个目录. 1.在Windows下进入这个目录. 2.在地址栏输入 C:/WI ...