function errorInfo(parm) {
//获取文本框值
var $val = parm.val();
if ($val==""||undefined||null){
//创建dom
var errorHtml = $("<div class=\"fail-info-box\"><i class=\"fail-icon\"></i><span class=\"fail-txt\"> !</span></div>\n");
var self = parm;
//获取提示文本值
var name = self.attr("data-name");
//添加高亮
self.addClass("fontColr");
self.css({"border-color":""});
//显示错误信息
errorHtml.children(".fail-txt").html("您的"+name+"填写错误!");
//插入dom
self.after(errorHtml);
//插入之后并显示
errorHtml.show();
}
}
//提交 下一步
function submitData(obj) {
var $inputLen = $(obj).length;
var $top;
for(var i = 0;i<$inputLen;i++){
//是否非空
if($(".fail-info-input").eq(i).val()==""){
//获取 为空的input top值
$top = $(".fail-info-input").eq(i).offset().top-50;
//提示错误信息
errorInfo($(".fail-info-input").eq(i));
//添加高亮
$(".fail-info-input").eq(i).addClass("fontColr");
//滑到未填项 的位置
$("html,body").animate({scrollTop:$top}, 500);
return false;
}
}
}

页面的错误提示  是动态创建的 插入到html 里,点击下一步的时候,遍历页面所有需要校验的input 并获取所有的 input  top值 left值 用来显示错误提示信息的位置,显示的时候需要调用  errorInfo方法,并把input值为空的传入进去 ,就可以了

input错误提示,点击提交,提示有未填项,屏幕滑到input未填项的位置的更多相关文章

  1. 教程-在F9后提示内存错误,点击了乎略,之后怎么取消乎略?

    问题现象:F9后,调试程序,提示内存错误,点击了“乎略”.之后再也没有出现错误了.可是想改这个BUG时,没法取消乎略了. 问题原因:在DLEPHI的选项中是这么一个地方是可以设置的. 问题处理:打开D ...

  2. ASP.NET弹出提示点击确定之后再跳转页面的方法

    //ASP.NET弹出提示点击确定之后再跳转页面的方法 //弹出了提示并且通过location.href转到了DeskTop.aspx页面 Response.Write("<scrip ...

  3. jenkins用户权限配置错误,导致登录时提示:没有Overall/read权限

    jenkins用户权限配置错误,导致登录时提示:没有Overall/read权限 由于初次接触jenkins,于是在搭建好jenkins以后,想要对用户进行管理,于是乎开始在系统管理->conf ...

  4. git提交提示workspace.xml出现conflicted

    问题:在github上管理项目,多次提交以后提交提示workspace.xml出现conflicted原因:Android项目在根目录的.gitignore文件中没有添加.idea文件夹忽略. 解决办 ...

  5. 百度小程序-form表单点击提交,input框内容不会清空

    百度小程序与微信小程序相似度90%.微信小程序转换为百度小程序,部分还是需要人工修改! 做了一个form留言表单,点击提交之后,input框第一次会清空,但是第二次就不会清空了! 不多说直接上代码! ...

  6. 程序连接Oracle数据库出现未找到提供程序.该程序可能未正确安装错误提示

    好不容易使用plsql可以成功连上数据库了,应用程序连接数据库却出现了问题 其实解决这个问题也简单: 1.  查看oracle安装目录下的BIN目录,E:\app\Administrator\prod ...

  7. 谈谈防止Ajax重复点击提交

    首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...

  8. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  9. Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示清理内容的解决方案

    Linux出现You have new mail in /var/spool/mail/root提示,关闭邮件提示的解决方案 有的时候敲一下回车,就出来You have new mail in /va ...

随机推荐

  1. 持续集成CI相关的几个概念

    持续集成 https://en.wikipedia.org/wiki/Continuous_integration 为什么要持续? 持续集成, 可以避免集成地狱(由于工作的源码 和 库中的源码的差异导 ...

  2. 【python小练】0012题

    第 0012 题: 敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好 ...

  3. 【python小练】0001

    第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? # coding ...

  4. APPLE-SA-2019-3-25-2 macOS Mojave 10.14.4,Security Update 2019-002 High Sierra, Security Update 2019-002 Sierra

    APPLE-SA-2019-3-25-2 macOS Mojave 10.14.4, Security Update2019-002 High Sierra, Security Update 2019 ...

  5. JS中attribute和property的区别

    attribute是HTML标签上的特性,它的值只能够是字符串:html 上id,class property是JavaScript里定义的对象: 如var  obj={x:1,y:2}  ,这里x, ...

  6. linux 截图工具 shutter

    ubuntu 安装shutter sudo apt install shutter libgoo-canvas-perl libgoo-canvas-perl是提供对截图编辑功能,例如,添加画框,文字 ...

  7. Hive思维导图

  8. GitHub贡献第一的公司是谁?微软开源软件列表

    参考:http://www.infoq.com/cn/news/2017/03/GitHub-first-Microsoft-open-sour 提起微软公司,不少人第一反应是老牌巨头专注于私有化软件 ...

  9. 虚拟节点操作——DocumentFragment

    文章中转站: DocumentFragment对象 createDocumentFragment()用法总结 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

  10. linux 开发板上的调试

    1.需要命令 ulimit 进行设置core file size ,  看 core file size. cat /proc/pid/limits,  这个暂时不用 2.需要有gdb命令 , 需要g ...