layui弹出层type=2无法正常验证问题

Posted myleisuretime

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui弹出层type=2无法正常验证问题相关的知识,希望对你有一定的参考价值。

思路:在弹出层页面form表单中增加一个隐藏的提交按钮,当弹出层点击确定按钮时,触发弹出层页面中的隐藏按钮,触发提交校验

弹出层脚本如下:

function LoadDemo(id) {
        layer.open({
            title: ‘弹出层标题‘, //弹出层标题
            type: 2,
            content: ‘demo.shtml‘,
            btn: [‘确定‘, ‘关闭‘],
            area: ["650px", "550px"],
            success: function (layero, index) {
                var body = $(layero).find("iframe")[0].contentWindow;
                $(body.id).val(id);
            },
            yes: function (index, layero) {
                var body = $(layero).find("iframe")[0].contentWindow;
                var form = body.form; //获取弹出层页面的form对象
                form.on(‘submit(submitForm)‘, function (data) {
                    var showResponse = function (result, status) {
                        if (result.success) {
                            layer.msg(result.msg, { time: 1500 }, function () {
                                layer.close(index);
                            });
                        } else {
                            layer.msg(result.msg, { time: 1500 }, null);
                        }
                    };
                    var options = {
                        success: showResponse,
                        url: urlPath,  //请求接口路径
                        type: "post",
                        dataType: "json",
                    };
                    $(body.myform).ajaxSubmit(options);
                    return false;
                })
                $(body.submit).click();
            },
            cancel: function () {
            }
        });
        return false;
    }

页面代码如下: 

 <form class="layui-form pl20 pr20 pt20 pb20" id="demoForm">
       <div class="layui-form-item ">
            <label class="layui-form-label"><span>*</span>内容:</label>
            <div class="layui-input-inline">
                <input type="text" id="price" name="price" lay-verify="required|number" placeholder="请输入内容" autocomplete="off"
                    class="layui-input">
            </div>
     </div>
 <button class="baseInfo-item-submit layui-btn  mt15" lay-submit lay-filter="submitForm" style="display:none;" id="submit">保存</button>
</form>
<script type="text/javascript">
    var form = layui.form; //初始化form
 //正常的业务逻辑
</script>

  

以上是关于layui弹出层type=2无法正常验证问题的主要内容,如果未能解决你的问题,请参考以下文章

layui弹出表单提交后,界面model验证部分起作用

弹出层-layui

关于layui弹出层的使用

layui弹出层layer.open 中的content问题

layer弹出层显示在top顶层

layui的弹出层效果在导航中的使用