解决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=\"开启|关闭\"></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, // 点击遮罩关闭
		content : html,
		btn : [ \'确认\', \'取消\' ],
		success : function(index, layero) { // 成功弹出后回调
			form.render(\'checkbox\'); // 刷新checkbox开关渲染(否则开关按钮会不显示)
		},
		yes : function(index, layero) { // 确认按钮回调函数
			layero.find(\'#addRole\').click();
		},
		btn2 : function(index, layero) { // 取消按钮回调函数
			layer.close(index); // 关闭弹出层
		}
	});

我的弹出层表单验证不起作用的原因是将弹框参数type设置成0了,将type改为1之后表单就起作用了

layer.open({
		type : 1,
		title : \'添加角色\',
		area : [ \'500px\', \'400px\' ],
		shadeClose : true, // 点击遮罩关闭
		content : html,
		btn : [ \'确认\', \'取消\' ],
		success : function(index, layero) { // 成功弹出后回调
			form.render(\'checkbox\'); // 刷新checkbox开关渲染(否则开关按钮会不显示)
		},
		yes : function(index, layero) { // 确认按钮回调函数
			layero.find(\'#addRole\').click();
		},
		btn2 : function(index, layero) { // 取消按钮回调函数
			layer.close(index); // 关闭弹出层
		}
	});

以上这篇解决layer弹出层中表单不起作用的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容