设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › WEB开发 › .NET讨论 › tabs与form表单组合验证问题
返回列表 发新帖
查看: 3215|回复: 1
打印 上一主题 下一主题

tabs与form表单组合验证问题 [复制链接]

mylaoying

Rank: 2
跳转到指定楼层
楼主
发表于 2017-2-23 12:01:07 |只看该作者 |倒序浏览
你好，我一个页面里有4个tabs选项卡。当提交表单时，只有当前选项卡里的表单能验证，其它选项卡里的表单控件无法验证。请问如何解决？

附代码：

<html>
<head>
<link href="http://localhost:8010/Scripts/ui/themes/default/ui.css" rel="stylesheet">
<script src="http://localhost:8010/Scripts/jquery/jquery-2.1.1.min.js"></script>
<script src="http://localhost:8010/Scripts/ui/ui.js"></script>
</head>
<body>
<form id="form1">
    <div style="margin: 6px 10px 0px 10px;">
        <div id="tabs" class="mini-tabs" activeIndex="0" style="width:100%;">
            <div title="基本信息" id="home">
                <table id="t1" class="form" cellpadding="0" cellspacing="0" border="0" style="margin: 5px 0px 5px 0px;">
                    <col width="80px" />
                    <col width="50%" />
                    <col width="80px" />
                    <col width="50%" />
                    <tr>
                        <th class="formTitle">名称</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="FullName" class="mini-textbox" required="true" />
                        </td>
                        <th class="formTitle">编号</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="F_RealName" class="mini-textbox" placeholder="请输入名称" />
                        </td>
                    </tr>
                </table>
            </div>
            <div title="扩展信息" id="profile">
                <table id="t2" class="form" cellpadding="0" cellspacing="0" border="0" style="margin: 5px 0px 5px 0px;">
                    <col width="80px" />
                    <col width="50%" />
                    <col width="80px" />
                    <col width="50%" />
                    <tr>
                        <th class="formTitle">名称</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="FullName1" class="mini-textbox" required="true" />
                        </td>
                        <th class="formTitle">编号</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="F_RealName1" class="mini-textbox" placeholder="请输入名称" />
                        </td>
                    </tr>
                </table>
            </div>
            <div title="备注信息" id="messages">
                <table id="t3" class="form" cellpadding="0" cellspacing="0" border="0" style="margin: 5px 0px 5px 0px;">
                    <col width="80px" />
                    <col width="50%" />
                    <col width="80px" />
                    <col width="50%" />
                    <tr>
                        <th class="formTitle">名称</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="FullName3" class="mini-textbox" required="true" />
                        </td>
                        <th class="formTitle">编号</th>
                        <td class="formValue">
                            <input style="width: 100%;" name="F_RealName3" class="mini-textbox" placeholder="请输入名称" />
                        </td>
                    </tr>
                </table>
            </div>
            <div title="附件上传" id="settings">
                <table id="t5" class="form" cellpadding="0" cellspacing="0" border="0" style="margin: 5px 0px 5px 0px;">
                    <col width="80px" />
                    <col width="50%" />
                    <col width="80px" />
                    <col width="50%" />
                    <tr>
                        <th class="formTitle">名称</th>
                        <td class="formValue">
                            <input style="width:100%" name="FullName5" class="mini-textbox" required="true" />
                        </td>
                        <th class="formTitle">编号</th>
                        <td class="formValue">
                            <input style="width:100%" name="F_RealName5" class="mini-textbox" placeholder="请输入名称" />
                        </td>
                    </tr>
                    <tr>
                        <th class="formTitle">负责人</th>
                        <td class="formValue">
                            <input style="width:100%" name="Corporate5" class="mini-textbox" />
                        </td>
                        <th class="formTitle">手机</th>
                        <td class="formValue">
                            <input style="width:100%" name="Corporate5" class="mini-textbox" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</form>
<a class="layui-layer-btn1 btn btn-primary btn-sm">保存</a>
<script type="text/javascript">
    mini.parse();
    var form = new mini.Form("form1");

    function CheckForm() {
        form.validate();
        if (!form.isValid()) {
            alert("验证未通过，请检查");
            return;
        }
    }
</script>
</body>
</html>

举报

dforce

Rank: 8Rank: 8
沙发
发表于 2017-2-23 14:32:16 |只看该作者
隐藏的控件不验证，这是基本规则。
最新版本表单控件新增了forceValidate属性，设置true，隐藏状态下也会验证。

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-5-8 05:16 , Processed in 1.041954 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部