最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦!

  在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已经初步完成啦,下一步自己全套流程测试一下。

  登录-权限-添加数据,嗯PC好像都没问题,能正常运行。继续到手机上测试下,嗯,好像也没问题!也能运行。但感觉好像那点不对劲,静下心想两分钟。

  歇后~ 。再捣鼓一下,好像是出问题了,在我新打开的登录页面中,好像登录按钮第一次点击无效啊!赶紧多测试几下,发现确实是无效,自言自语:“咦,尼玛这是什么鬼情况!!!”,赶紧看下其他页面是不是一样的。

  经过两分钟的观测,爆了个粗口:“卧槽!以前(以前的项目)就好好的,现在给老子出这种鬼问题!!!”,赶紧看看以前的案例,是不是少引用了js文件。

  十分钟后,不对啊,没少啊!难道是js文件引用顺序问题!说道就开始做,按照关系重新排列了一次所有js文件顺序,排完F5,两分钟.....才高兴两分钟,我的心情又变坏了,不是js文件顺序的问题,赶紧想想!还有没有其他可能?火气太大,不行,我要先喝口水再说!

  正喝水中!突然眼睛一睁,好像有种可能,是不是js文件冲突啦!很有可能,说不定是js绑定了其他事件,造成的点击无效!我感觉我自己好像找到了问题的根源。现在是使用万能的排除法的时候啦!马上开始动手,把所有的无关的js注释掉了,只保留了jquery,和Validform.js。继续F5,跑一跑试试,第三次爆粗口:“卧槽!不是这个原因!到底是什么鬼情况啊!啊aa”。

  不行啦!不行啦!肚皮都饿了!先去吃饭再说,回来看看官方文档,论坛社区有没有相关问题!

  有时候啊!程序员真是世界上最积极的动物啦!心中想着这个bug,我以最快的速度囫囵吃完,回到办公室继续捣鼓我的问题!

  看了官方的文档,我尝试着改变了(tiptype)参数值,由4改成1。“咦!瞎猫撞死耗子!居然撞到了,现在能提交了!这真是一种..........”

$("#loginForm").Validform({
tiptype: 1,
ajaxPost: true,
callback: function (e) {
if (e && e.status == "y") {
layer.msg(e.info, { icon: 6 });
window.location.href = "/Project/Index";
} else {
layer.msg(e.info, { icon: 2 });
}
}
});

  不过我不能用他这个参数啊!我要(tiptype=4)才行啊!以前项目都是用的这个都没出问题晒!难道以前的项目中存在什么特殊的配置?问题是人家官网demo都没问题呀!看来我还是没找到问题的根源,又一次的失望,郁闷。这次已经没心情爆粗口了。只有叹气叹气.....

  我像我需要静静,把脑壳冷静下来,才能更敏锐的找出问题!仔细回想一下,到底是什么时候出的问题!最开始不是这样的。

  从我编写完登录页面,当时是正常的!后来我没去改过呀!怎么就出问题了呢?好像我改过公共的css,难道这个东东还受css影响?不得不说,人啊!有时候脑洞大开,什么想法都能产生。不管了,我的性格是有可能就要去尝试,反正多动手不吃亏吗。一试,真的好像是css的问题

  

.Validform_checktip{
/*margin-left:8px;
line-height:20px;
height:20px; 这是影响的css部分*/
overflow:hidden;
color:#999;
font-size:12px;
}

  当时css是我为了缩小行宽注释掉的,取消注释,表单提交按钮的功能就正常啦!给大家看下页面对比

  

  请大家仔细看看密码输入框和登录按钮的间距,这种情况下我马上点击登录按钮是没有提交表单的!只是触发了验证,变成下面这个效果

  大家仔细看下,登录按钮和密码框的距离和上图已经不一样了,因为显示了验证成功的文字!这时候再次点击登录按钮,提交了表单

  如果我取消上面css注释的部分!点击登录按钮就会提交表单,页面就变成下图

  仔细观测,密码输入框和登录按钮间距在验证前后都没有发生改变!和css注释是,验证后的距离等同。

  经过我的多次测试,最终得出结果:

    当css注释掉高度时,点击登录按钮,实际上是触发了密码输入框的焦点移除事件!进行了数据验证,而数据验证的结果显示撑大了密码输入行的高度。

    这时候,登录按钮实际上的位置已经不再原来的位置了,故点击无效!有时候在点击登录按钮底部部分,表单一样提交,原因就是登陆按钮坐标还没有超出以前的范围,故响应了点击事件!

  以上就是我本次趟坑趟出来的经验,这种情况很少见。不知道有没有同仁遇到过,嘿嘿嘿

  本人第一次写博客,谢谢大家观看,写的有点啰嗦,还有点小情绪。希望大家多多提提宝贵的意见,踊跃发言

  最后:不知道我的结果对了没有!希望园里的大咖多多指教

    

  

  

  

才趟过的一个坑,css造成的Validform表单提交按钮点击无效的更多相关文章

  1. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  2. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  3. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

  4. HTML5+CSS:02用户注册表单

            新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...

  5. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  6. golang-web框架revel一个表单提交的总结

    这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...

  7. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  8. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 5 第一个Django第4部分(表单和通用视图)

    上一节完成了视图编写,这一节为应用添加投票功能,也就是表单提交. 5.1编写一个简单的表单 5.2使用通用视图 5.3改良视图 5.1编写一个简单的表单 在网页设计中添加Form元素 polls/te ...

随机推荐

  1. session统计在线人数

    /* * 当不涉及验证码的时候 */ //统计游客(未登录)人数 $map = array('session_expire'=>array('gt',NOW_TIME),'session_dat ...

  2. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

  3. LxNx前端F2F面试问题整理

    LxNx前端面试问题: 1. 你用过前端哪些框架?它们项目中会用到Angular.js Backbone.js 我回答jQuery, bootstrap, 而Augular.js只是学过 2. 那既然 ...

  4. SQL注入-攻入Apple ID钓鱼网站实录

    之前写的一篇利用SQL注入方式攻击钓鱼网站的文章,现在在博客园再分享一下. 下午,朋友发了一条朋友圈,内容大概这样: 大体就是她的iPhone丢了,收到了钓鱼短信,多么熟悉的套路,如下: 还好她比较机 ...

  5. (转)没有IE就没有伤害!浏览器兼容性问题解决方案汇总

    普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的.俗话说:没有IE就没有伤害. 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和 ...

  6. c# 替换所有中文、标点符号,全角转半角

    private void btnStart_Click(object sender, EventArgs e) { var srcWords = ToDBC(txtSrc.Text.Trim()); ...

  7. 网络唤醒原理浅析(Wake On LAN)

    之前我的一篇文章<网络唤醒全攻略(Wake On Lan)>介绍过如何设置远程唤醒电脑,着重于使用,这篇主要从原理方面解析一下当中的奥妙: 原理 将唤醒魔术包发送的被唤醒机器的网卡上,魔术 ...

  8. nohup介绍

    背景 我们通常使用&将前台任务变为后台任务执行,但是如果只是使用&,那么在突然断网或者关闭启动该任务的终端(ps:可使用putty来测试,部分软件如mobaxterm做了优化,关闭终端 ...

  9. centos 7 最小安装后 安装FTP服务器 vsftp

    1.首先查看下 系统配置 rpm -q ftp #肯定是没安装, 2.安装 vsftpd yum -y vsftpd 3.vim /etc/vsftpd/vsftpd.conf anonymous_e ...

  10. 关于Java的发展前景

    各位看官觉得Java还能火几年?未来的发展方向是什么?