jQuery覆盖默认验证错误消息显示(Css)Popup/Tooltip之类

2023-10-01前端开发问题
0

本文介绍了jQuery覆盖默认验证错误消息显示(Css)Popup/Tooltip之类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我正在尝试使用 div 而不是标签来覆盖默认错误消息标签.我看过
(来源:scriptiny.com)

如果您希望在一组选项或字段之后显示错误消息.然后将一个容器内的所有这些元素分组为div"或fieldset".例如,为所有这些组"添加一个特殊类.并将以下内容添加到 errorPlacement 函数的开头:

errorPlacement: function(error, element) {if (element.hasClass('group')){元素 = element.parent();}...//如前所述继续

如果您只想处理特定情况,可以使用 attr 代替:

if (element.attr('type') == 'radio'){元素 = element.parent();}

这应该足以让错误消息显示在父元素旁边.

您可能需要将父元素的宽度更改为小于 100%.

<小时>

我已经尝试过您的代码,它对我来说非常好用.这是一个预览:

我只是对消息填充做了一个非常小的调整,以使其适合该行:

div.error {填充:2px 5px;}

您可以更改这些数字以增加/减少顶部/底部或左侧/右侧的填充.您还可以在错误消息中添加高度和宽度.如果您仍然遇到问题,请尝试将 span 替换为 div

<div class="group">

然后给容器一个宽度(这个很重要)

div.group {宽度:50px;/* 或任何其他值 *
The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

layui中表单会自动刷新的问题
layui中表单会自动刷新的问题,因为用到layui的表单,遇到了刷新的问题所以记录一下: script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

ExecJS::ProgramError: SyntaxError: 保留字“function"
ExecJS::ProgramError: SyntaxError: Reserved word quot;functionquot;(ExecJS::ProgramError: SyntaxError: 保留字“function)...
2024-04-20 前端开发问题
13

无限滚动和 will_paginate 多次附加项目的“下一页"
Infinite scroll and will_paginate appending the #39;next page#39; of items multiple times(无限滚动和 will_paginate 多次附加项目的“下一页)...
2024-04-20 前端开发问题
8