jquery表单验证validate

在做表单验证时,如果表单信息比较多,导致提交按钮和错误信息没在已屏显示,就会导致无法提交,又没有友好提示的问题。

理想的解决办法就是在验证发生错误时,自动定位到错误提示的地方,方便用户查看和修改。

 $("#Send").click(function (e) {
        // 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $(‘html‘) : $(‘body‘)) : $(‘html,body‘);
        //表单提交出现错误定位到具体出错位置 方便用户进行修改
            if (!$(‘form).valid()) {
                var targetId = "";
                $($(‘form).validate().errorList).each(function (index, item) {
                    if (targetId == "") {
                        targetId = $($(item).attr(‘element‘)).attr(‘id‘);
                    }
                });
                $body.animate({ scrollTop: $(‘#‘ + targetId).offset().top - 30 }, 500);
                return;
            }

    });

跳转到出错的第一个位置

时间: 2024-07-31 04:08:29

jquery表单验证validate的相关文章

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery表单验证

js表单验证,这是个人做的总结,需要的请留言 需要文件:jquery.js, validator.js, validator.css, add.xml xml文件: <?xml version="1.0" encoding="utf-8"?> <root box="errorbox"> <username> <required>请填写姓名</required> </username

JQuery 表单验证--jquery validation

jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validatio

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

简单的Jquery表单验证

本段代码举了一个最简单的表单验证实例,就是判断输入框是否为空而已,大家可以根据这个原理,加入正则表达式判断,实现各种功能强大的表单验证功能 <html>    <head>        <title>Validate empty fields</title>        <style type="text/css">            body{font-family:"Trebuchet MS",

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

JQuery表单验证插件EasyValidator,超级简单易用!

本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. 顺便AD下刚出炉的小站,欢迎捧场:www.paipaiyou.com EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: <input name="name" tip

python_way day17 jQuery表单验证,插件,文本框架

python_way day17 jQuery表单验证 dom事件绑定 jquery时间绑定 $.each return值的判断 jquery扩展方法 前段插件 jDango文本框架 一,jQuery:表单验证: 1.dom方法提交表单,并验证: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</ti