1. 程式人生 > >(表單重複提交)jquery驗證 通過時,提交按鈕變灰,不通過時正常顯示

(表單重複提交)jquery驗證 通過時,提交按鈕變灰,不通過時正常顯示

原理 ,所有表單驗證通過後,form.submit();進行表單提交。

例項1

因此在在驗證回來通過之後,表單提交前 設定提交按鈕為灰

document.getElementById("signupbutton").disabled=true;
            form.submit();  

<script>
//自定義驗證規則
$(document).ready(function() {
	
	//設定預設屬性
	$.validator.setDefaults({       
		submitHandler: function(form) {
			document.getElementById("signupbutton").disabled=true;
			form.submit();    
	   }
	}),
	
	//開始驗證
	$("#signupForm").validate({						  
		rules: {
			realname: {
				required: true,
				stringCheck:true,   
				byteRangeLength:[4,15]
			},
			mobile: {
				required: true,
				isMobileNo: true
			},
			password: {
				required: true
				
			},
		},
		
		//設定錯誤資訊存放標籤
		errorElement: "em",
		//指定錯誤資訊位置
		errorPlacement: function (error, element) { 
      		if (element.is(':radio') || element.is(':checkbox')) {
          		var eid = element.attr('name');
          		error.appendTo(element.parent());
      		} else {
      			//error.appendTo(element.parent().next());
          		error.appendTo(element.closest("div"));
          		//error.appendTo(element.closest("td"));
     		}
		},
		//設定驗證觸發事件
		focusInvalid: true,
		//設定驗證成功提示格式
		success:function(e)
		{
    		e.html(" ").addClass("valid").text('ok');
		}
	})
});
  </script>


表單名為 signupForm

表單form 提交按鈕,並起id="signubutton" ,用於上邊設定時對應id按鈕處理

<input type="submit" class="btn btn-primary" name="signup" id="signupbutton" value="注    冊" style="width:225px;margin-left:-20px;" />


相關推薦

重複提交jquery驗證 過時提交按鈕不通過時正常顯示

原理 ,所有表單驗證通過後,form.submit();進行表單提交。 例項1 因此在在驗證回來通過之後,表單提交前 設定提交按鈕為灰 document.getElementById("signupbutton").disabled=true;             f

Jquery 實現提交按鈕防止多次點選提交重複資料

    表單提交時候我們應該控制提交按鈕,不能點選多次進行資料的重複提交。要不然就會有冗餘的重複的資料在系統中,造成系統出現數據垃圾。jQuery很簡單的就可以實現對錶單提交按鈕控制,下面就是相關的例子和程式碼。 <form action="${pageContex

web前端【第二篇】HTML基礎二、div

ebe add 渲染 efi end 文件 ctype 發送 type 一、表單 功能:表單用於向服務器傳輸數據,從而實現用戶與Web服務器的交互 表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等。 表單還可以包含text

javascript封裝校驗

先上圖: 產品的需求是點選框內輸入時不提示錯誤,等滑鼠離開時校驗錯誤,那我就這樣寫 //增加提示程式碼 $.prototype.accounterror=function(info){ $(this).next("span").remove(); $(this).aft

學習:從零玩轉HTML5前端+跨平臺開發練習(理解)

單選框:radio,通過name屬性進行互斥;checked預設選中多選框:checkbox,通過name屬性進行互斥;checked預設選中下拉選中框:select除了按鈕型別的input標籤以外,其他的型別的標籤都可以通過一個value屬性來指定將來提交到伺服器的值提交:

傳送post請求的方式

1 httpClient封裝後使用,get和post方法 Java程式碼   package util;   import java.io.BufferedReader;   import java.io.InputStream;   import java.io

PyQt5 QTableWidget控制元件自適應視窗大小、欄位大小調整及佈局

目錄 前言 前言 還好,我有C++ Qt Help(幫助文件)O(∩_∩)O哈哈~ 本文旨在介紹QTableWidget(表單控制元件)的自適應視窗大小、欄位大小調整及佈局。 用QtDesigner設計UI 1. 先用QtDe

解決重複提交問題使用例模式md5+base64

form表單重複提交 1.新建TokenProccessor工具類 package cn.kgc.utils; import java.security.MessageDigest; import java.security.NoSuchAlgorithmEx

Struts2防止重複提交原始碼

struts配置檔案:struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     "-//Apache Software Foundation//DTD St

如何防止重複提交token令牌

在伺服器端生成一個唯一的隨機標識號,專業術語稱為Token(令牌),同時在當前使用者的Session域中儲存這個Token。然後將Token傳送到客戶端的Form表單中,在Form表單中使用隱藏域來儲存這個Token,表單提交的時候連同這個Token一起提交到伺服器端,然後

使用js控制重複提交1加鎖2事件方式3 EasyUI中解決重複提交

方法一、var flag = true; $(function() { $("#interested").click(function() { beInterested(); }); }); function beInterested() { //$("#inte

jquery過濾選擇器-----------對象屬性過濾選擇器 與 選擇器

images alt 分享 wid image logs jquery query 器) 1.表單對象屬性選擇器    2.程序 3.表單選擇器    jquery過濾選擇器-----------(表單對象屬性過濾選擇器 與 表單選擇器)

php之-2驗證

eth left cit span dem 讓我 但是 cape ren PHP 表單驗證 本章節我們將介紹如何使用PHP驗證客戶端提交的表單數據。 PHP 表單驗證 在處理PHP表單時我們需要考慮安全性。 本章節我們將展示PHP表單數據安全處理

註冊全局指令驗證

route reat 所有 指令對象 word 父節點 自定義 重新 efault 1). 導出驗證指令對象 在 src/directives 下新建 validator.js 文件,復制貼入以下代碼: src/directives/validator.js 1 fu

問題記錄-----重複提交==>利用session驗證

問題記錄-----表單重複提交==>利用session驗證 大概方法就是利用session生成一個token做提交驗證,話不多說上程式碼 html程式碼 <form id="frmsave" action="" enctype="multipart/form-dat

使用Spring AOP註解方式實現重複提交驗證功能

防重複提交常見解決方案:http://patrick002.iteye.com/blog/2197521 定義註解 @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interf

yii2中自定義或者post請求 csrf驗證防跨站偽請求

第一種解決辦法是關閉Csrf public function init(){ $this->enableCsrfValidation = false; } 第二種解決辦法是在form表單中加入csrf隱藏域表單。表單名根據我們的cookie設定

Springboot之Thymeleaf 標籤驗證|第三章-yellowcong

上一節剛剛講解了,如何通過Thymeleaf 來使用表單提交,現在我們這一節,講解如何使用表單驗證。Thymeleaf 表單驗證的步驟:1、新增hibernate-validator的依賴包。2、建立表單類,裡面添加註解說明欄位的資訊,3、建立介面控制器,

解決重複提交和分散式伺服器驗證碼存放問題

一、解決表單重複提交問題 表單重複提交很常見,造成的原因是:表單重複提交的原因是短時間內使用者多次請求到後臺,後臺還沒處理完上一個請求響應到前端頁面接著下一個請求來了,會造成資料庫的                                             

Angularng指令操作

rep class itl lock als 表達 tro [] pri html部分 ................................................. <!DOCTYPE html><html lang="en" ng-