jquery validate触发表单验证

jquery validate是常用的表单验证插件。遇到一个jquery validate表单验证不触发的问题

目前写法:
$(function(){
  $("#form").validate({
     rules : {
            themeColor: {
                required : true
            },
            ……
        },
        messages : {
            themeColor: {
                required : ‘必填‘,
            },
            ……
        }
  });
});

<div class="btnWrap">    <button type="button" class="btn btn-block btn-radius btn-st btn-caution submit-btn " id="btn">上传    </button></div>

点击上传按钮,触发表单验证,经测试验证无法触发。仔细研究使用方法发现,上面的写法只能使用submit才能触发。
<div class="btnWrap">    <button type="submit" class="btn btn-block btn-radius btn-st btn-caution submit-btn " id="btn">上传    </button></div>

如想在普通按钮上实现触发表单验证,需稍作修改://编写表单验证函数validform,在验证按钮注册按钮点击事件内调用验证函数对象function validform(){  /*关键在此增加了一个return,返回的是一个validate对象,这个对象有一个form方法,返回的是是否通过验证*/   return $("#form").validate({     rules : {            themeColor: {                required : true            },            ……        },        messages : {            themeColor: {                required : ‘必填‘,            },            ……        }  });}//表单验证$(validform());以上部分已经实现匿名函数的作用,下面介绍如何通过普通按钮实现表单验证$("#btn").click(function(){     if(validform().form()) {        //通过表单验证,以下编写自己的代码    } else {        //校验不通过,什么都不用做,校验信息已经正常显示在表单上    }});
时间: 2024-08-02 13:06:28

jquery validate触发表单验证的相关文章

基于Jquery Validate 的表单验证

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: 1 <form action="XXXX.action" method="post" onsubmit="r

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

jQuery.validate.js表单验证插件

jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理

当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.match(/7./i)=="7." || navigator.appVersion.match(/8./i)=="

基于Bootstrap+jQuery.validate Form表单验证实践

项目结构 : github 上源码地址:https://github.com/starzou/front-end-example    点击打开 1.form 表单代码 [html] view plaincopy <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf-8" /> <meta

jquery validate.js表单验证的基本用法入门--不用写繁琐的验证代码了...

jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了. 这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 1 <script type="text/javascript"> 2 function lang(key) { 3 mylang = { 4 'ls_input_myb': '请输入您的账户', 5 'ls_myb_email': '漫游

jQuery Validate 提交表单验证失败扩展方法

由于Validate没有提供表单提交过后,验证不通过触发方法.这里做一下扩展. 引用场景:每次提交表单元素验证不通过触发方法 打开源代码 找到focusInvalid 方法, 这里是提交表单时验证不通过触发方法,在这里做扩展是就好不 过的. focusInvalid: function() { if ( this.settings.focusInvalid ) { try { $(this.findLastActive() || this.errorList.length && this.

jQuery Validate 插件[表单验证 属性介绍]

详细介绍一下Validate插件 $("#form的Id").validate({ }) 属性 规则 描述 required:true 必须输入的字段 required: "#aa:checked" 表达式的值为真,则需要验证. required: function(){}  返回为真,表示需要验证 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值. email:true 必须输入正确格式的电子邮件.