easyui-combogrid必填为空时无法通过表单验证的问题
在使用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必填为空时无法通过表单验证的问题的更多相关文章
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ...
- atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则
atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...
- atitit.表单验证 的dsl 本质跟 easyui ligerui比较
atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证
系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...
- 仿照easy-ui并改进的表单验证
概述 easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证.后台验证.远程异步验证等,这些功能要解决起来是比较吃力的.我仿照它的样式,写了一套前端表单验证的validB ...
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
- PHP表单验证内容是否为空
内容为空效果图为: 填写内容效果图: 下面是验证程序的代码: <!doctype html> <html> <head> <meta http-equiv=& ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单
系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...
- 扩展easyui 的表单验证 (转)
From:http://www.cnblogs.com/gengaixue/archive/2012/07/14/2591054.html easyui 的validatebox()提供了自定义验证的 ...
随机推荐
- 消除transition闪屏
消除transition闪屏.css {-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit ...
- C#利用WebClient 两种方式下载文件(一)
WebClient client = new WebClient(); 第一种 string URLAddress = @"http://files.cnblogs.com/x4646/tr ...
- 使用C#版OpenCV进行圆心求取
OpenCVSharp是OpenCV的.NET wrapper,是一名日本工程师开发的,项目地址为:https://github.com/shimat/opencvsharp. 该源码是 BSD开放协 ...
- Mysql update后insert造成死锁原因分析及解决
系统中出现死锁的日志如下: ) TRANSACTION: , ACTIVE sec inserting mysql tables , locked LOCK WAIT lock struct(s), ...
- PRD、MRD、BRD的含义
一.PRD的含义 英文简称,PRD(Product Requirement Document),PRD文档中文意思是:产品需求文档. PRD文档是产品项目由“概念化”阶段进入到“图纸化”阶段的最主要的 ...
- 解决IE下面诡异地使用quickrIE5模式打开页面的有关问题
解决IE下面诡异地使用quickrIE5模式打开页面的有关问题 <!doctype html public "-//w3c//dtd html 4.01 transitional//e ...
- netcat 详解
简介 netcat 是一款调试 TCP/UDP 网络连接的利器,常被称作网络调试的瑞士军刀,可见其功能强大. netcat 在 Linux, Windows 等各大操作系统上都有对应等发行版,以下以 ...
- Missing map from Nullable`1 to String. Create using Mapper.CreateMap<Nullable`1, String>. 解决办法
这是一个叫做AutoMapper的插件,主要功能是让两个类的内容进行映射,最常见的例子就是EF查询出的内容映射到一个实体类上去然后返回这个实体类例如: Mapper.CreateMap(); 如果这时 ...
- Luogu [P1334] 瑞瑞的木板(手写堆)
其实这个题完全不需要用手写堆,只需要一遍遍sort就行了…… 但是! 为了练习手写堆,还是用手写堆做了. 在做本题之前,如果你没有什么思路的话,建议先做Luogu的合并果子. 好,假设你已经做过了合并 ...
- 运维自动化之Cobbler系统安装详解
原文链接 参考文档 参考文档SA们现在都知道运维自动化的重要性,尤其是对于在服务器数量按几百台.几千台增加的公司而言,单单是装系统,如果不通过自动化来完成,根本是不可想象的. 运维自动化安装方面,早期 ...