首页 > 其他分享 >fastAdmin 修改表单验证错误提示信息位置

fastAdmin 修改表单验证错误提示信息位置

时间:2023-06-05 10:25:29浏览次数:34  
标签:提示信息 form bottom 表单 修改 validator fastAdmin

原先效果:

 觉得在右侧不太好看,另外假如布局设置一行两块表单,那么会影响效果。

解决方案

找到 \public\assets\js\require-form.js 大概在 15 行左右

//绑定表单事件
form.validator($.extend({
    validClass: 'has-success',
    invalidClass: 'has-error',
    bindClassTo: '.form-group',
    formClass: 'n-default n-bootstrap',
    msgClass: 'n-bottom', // 只修改了这个属性, 由原来的 "n-right" ==> "n-bottom"
    stopOnError: true,

提示语可能会和下一行的input 重合, 修改提示语 css 样式. \public\assets\libs\nice-validator\dist\jquery.validator.css 大概在 140 行左右,可以先看看效果,不满意就修改。

.n-bottom .msg-wrap {
    margin-top: 2px; // 修改了下间距, 由原来的 "6px" ==> "2px"
}

 

标签:提示信息,form,bottom,表单,修改,validator,fastAdmin
From: https://www.cnblogs.com/wt645631686/p/17457134.html

相关文章

  • fastadmin 修改弹窗大小
    一、编辑/添加按钮的弹窗首先需要找到对应控制器生成的js文件,一般就在public下①、在初始化表格参数配置上方加入$(".btn-edit").data("area",["1000px","80%"]);//编辑$(".btn-add").data("area",["60%","80%"]);//添加 ②、在为表格绑定事......
  • 分享10个最好的jQuery表单插件
    为web设计或者开发者来说,表单是我们经常需要打交道的设计元素之一。不论你开发登陆功能,在线购物功能,或者是注册功能,你都需要使用表单来执行用户输入。但其实并不是很多开发人员都关心开发或者设计表单元素。而表单设计最重要的目的在于能够将表单设计超越它本身结构以达到使用体......
  • jquery插件合集之分页插件[表单和表格]
    [url]http://www.skygq.com/2011/01/24/jquery%E6%8F%92%E4%BB%B6%E5%90%88%E9%9B%86%E4%B9%8B%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6/[/url][color=red][b]jPaginate:AFancyjQueryPaginationPlugin[/b][/color][url]http://tympanus.net/codrops/2......
  • 04web安全学习---PHP表单验证
    一、什么是表单?二、如何创建一个表单表单的一个最简单的写法:<formaction="https://www.baidu.com/s"><inputname='wd'/><inputtype='submit'/></form><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"&quo......
  • 靳宇灵 | FastAdmin多语言配置
    在FastAdmin中可以在任何位置(控制器、视图、JS)使用__('语言标识');调用语言包,如果语言标识不存在,则直接输出该语言标识。使用方法FastAdmin中的__函数和ThinkPHP中的lang函数在传参上有些许区别比如__('Mynameis%s',"FastAdmin");将会返回MynameisFastAdmin而如果采用Thin......
  • fastadmin隐藏搜索按钮
     设置showSearch:false即可 ......
  • fastadmin隐藏右上角的搜索按钮及其导出等
     想要隐藏这些按钮,有两种方式一、直接html文件里修改data-show-export="false"data-show-toggle="false"data-show-columns="false"data-search="false"data-common-Search="false" 二、在bootstarpTable初始化的时候设定//初始化表格......
  • AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然
    <!doctypehtml><html><head><metacharset="utf-8"><title>NgForm</title><scripttype="text/javascript"src="lib/[email protected]"></script><scripttype=&......
  • ElementUI的form表单验证注意事项
    ElementUI的form表单验证注意事项1.踩过的坑,记录一下。验证表单时一直提示必填项未填写,实际已经填写了。2.el-form的正确使用流程el-form就是最外层的form表单,做验证有三个必填属性,不填写验证就会不正确。ref属性:相当于ID,稍后的提交按钮函数会用到它。:model:绑定要用......
  • 自定义表单设计器助您随心所欲定制专属表格!
    在新的发展时代,传统的表格设计器已经无法满足日愈繁杂的办公需求。那么,如何来定制专属的办公表格?其实,这也不是一件难事,只需要了解自定义表单设计器就行。在快速发展的现代化社会中,低代码开发平台也迎来了蓬勃的发展商机,它的灵活、简便和易操作等优势在无数行业办公领域深受喜爱,也......