解決layer彈出層中表單不起作用的問題
如下所示:
var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type="text" name="rolename" required lay-verify="required" placeholder="請輸入角色名" autocomplete="off" class="layui-input"></div></div>' + '<div class="layui-form-item layui-form-text"><label class="layui-form-label">角色描述</label><div class="layui-input-block"><textarea name="roledesc" placeholder="請輸入角色描述" class="layui-textarea"></textarea></div></div>' + '<div class="layui-form-item"><label class="layui-form-label">是否啟用</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch" lay-text="開啟|關(guān)閉"></div></div>' + '<div class="layui-form-item" hidden><div class="layui-input-block"><button id="addRole" class="layui-btn" lay-submit lay-filter="formDemo">提交</button></div></div>' + '</form>'; layer.open({ type : 0, title : '添加角色', area : [ '500px', '400px' ], shadeClose : true, // 點(diǎn)擊遮罩關(guān)閉 content : html, btn : [ '確認(rèn)', '取消' ], success : function(index, layero) { // 成功彈出后回調(diào) form.render('checkbox'); // 刷新checkbox開關(guān)渲染(否則開關(guān)按鈕會不顯示) }, yes : function(index, layero) { // 確認(rèn)按鈕回調(diào)函數(shù) layero.find('#addRole').click(); }, btn2 : function(index, layero) { // 取消按鈕回調(diào)函數(shù) layer.close(index); // 關(guān)閉彈出層 } });
我的彈出層表單驗(yàn)證不起作用的原因是將彈框參數(shù)type設(shè)置成0了,將type改為1之后表單就起作用了
layer.open({ type : 1, title : '添加角色', area : [ '500px', '400px' ], shadeClose : true, // 點(diǎn)擊遮罩關(guān)閉 content : html, btn : [ '確認(rèn)', '取消' ], success : function(index, layero) { // 成功彈出后回調(diào) form.render('checkbox'); // 刷新checkbox開關(guān)渲染(否則開關(guān)按鈕會不顯示) }, yes : function(index, layero) { // 確認(rèn)按鈕回調(diào)函數(shù) layero.find('#addRole').click(); }, btn2 : function(index, layero) { // 取消按鈕回調(diào)函數(shù) layer.close(index); // 關(guān)閉彈出層 } });
以上這篇解決layer彈出層中表單不起作用的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器
這篇文章主要介紹了js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器,需要的朋友可以參考下2014-06-06JS實(shí)現(xiàn)簡單tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單tab選項(xiàng)卡切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10javascript 用記憶函數(shù)快速計算遞歸函數(shù)
摘自《JavaScript: The Good Parts》,作為讀書筆記備用。對于追求執(zhí)行效率的朋友可以參考下。2010-03-03.net JS模擬Repeater控件的實(shí)現(xiàn)代碼
一個模板控件規(guī)定了它的模板語法和js api,這是一個repeater控件的JS實(shí)現(xiàn):2013-06-06javascript數(shù)據(jù)類型中的一些小知識點(diǎn)(推薦)
這篇文章主要介紹了javascript數(shù)據(jù)類型中的一些小知識點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04js獲取元素的標(biāo)簽名實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s獲取元素的標(biāo)簽名實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記
這篇文章主要介紹了javascript異步編程代碼書寫規(guī)范Promise學(xué)習(xí)筆記,需要的朋友可以參考下2015-02-02