jquery.validate提示錯(cuò)誤信息位置方法
本文實(shí)例講述了jquery.validate提示錯(cuò)誤信息位置方法。分享給大家供大家參考,具體如下:
好長(zhǎng)時(shí)間沒(méi)有用jquery.validate.js這個(gè)插件了,忘得差不多了。唉,好東西還是要經(jīng)常拿出來(lái)看看的,今天用jquery.validate來(lái)做一個(gè)小東西,遇到一個(gè)問(wèn)題,就是錯(cuò)誤提示信息的位置問(wèn)題,如果知道的話(huà),很簡(jiǎn)單。以前遇到過(guò),可是忘了,現(xiàn)在標(biāo)記一下,將來(lái)在忘了,在回過(guò)頭看看。俗話(huà)說(shuō)的好,好記性不如爛筆頭。
舉個(gè)例子,大家就知道怎么回事了。
rules: { name:{ required:true, rangelength:[1,20] }, validateCode: { required:true, number:true, rangelength:[5,5] } }, messages: { name: { required: "請(qǐng)輸入命令名", rangelength: jQuery.format("長(zhǎng)度請(qǐng)控制在{0} ~ {1}") }, validateCode: { required: "請(qǐng)輸入驗(yàn)證碼", number: "請(qǐng)輸入數(shù)字", rangelength: jQuery.format("長(zhǎng)度必須是5位") } }, success: function(label) { label.addClass("error checked"); }, submitHandler: function(form) { if($("#RegionId").val() == '0'){ $("#citySelect").attr("class","error").html('請(qǐng)選擇區(qū)域').show(); $("#RegionId").attr("class","error"); }else{ $("#RegionId").attr("class","valid"); $("#citySelect").attr("class","valid").html('success').show(); form.submit(); } } });
在上面的代碼中,我并沒(méi)有添加錯(cuò)誤信息存放位置的方法,我們看一下效果
<td> <input type="text" maxlength="30" value="" id="name" name="name"> <label for="name" generated="true">請(qǐng)輸入命令名</label> //錯(cuò)誤信息會(huì)自動(dòng)根在輸入框的后面。 </td>
如果我們加上錯(cuò)誤信息位置的方法errorPlacement來(lái)看一下效果是什么樣子的。
rules: { name:{ required:true, rangelength:[1,20] }, validateCode: { required:true, number:true, rangelength:[5,5] } }, messages: { name: { required: "請(qǐng)輸入命令名", rangelength: jQuery.format("長(zhǎng)度請(qǐng)控制在{0} ~ {1}") }, validateCode: { required: "請(qǐng)輸入驗(yàn)證碼", number: "請(qǐng)輸入數(shù)字", rangelength: jQuery.format("長(zhǎng)度必須是5位") } }, errorPlacement: function(error, element) { //錯(cuò)誤信息位置設(shè)置方法 error.appendTo( element.parent().next() ); //這里的element是錄入數(shù)據(jù)的對(duì)象 }, success: function(label) { label.addClass("error checked"); }, submitHandler: function(form) { if($("#RegionId").val() == '0'){ $("#citySelect").attr("class","error").html('請(qǐng)選擇區(qū)域').show(); $("#RegionId").attr("class","error"); }else{ $("#RegionId").attr("class","valid"); $("#citySelect").attr("class","valid").html('success').show(); form.submit(); } } });
來(lái)看一下效果
<tr> <th><label for="name" id="lname"><code title="必填">*</code>命令名稱(chēng)</label></th> <td><input type="text" maxlength="30" value="" id="name" name="name"></td> <td><label for="name" generated="true">請(qǐng)輸入命令名</label></td> //錯(cuò)誤信息跑到這兒來(lái)了, </tr>
夠簡(jiǎn)單吧,在簡(jiǎn)單的東西,長(zhǎng)時(shí)間不用也會(huì)忘的。
更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery.validate 自定義驗(yàn)證方法及validate相關(guān)參數(shù)
- jQuery.Validate驗(yàn)證庫(kù)的使用介紹
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jquery.validate使用時(shí)遇到的問(wèn)題
- jQuery.validate 常用方法及需要注意的問(wèn)題
- jquery.validate使用詳解
- jquery.validate的使用說(shuō)明介紹
- 利用jQuery.Validate異步驗(yàn)證用戶(hù)名是否存在(推薦)
- 功能強(qiáng)大的jquery.validate表單驗(yàn)證插件
- jquery.validate自定義驗(yàn)證用法實(shí)例分析【成功提示與擇要提示】
相關(guān)文章
基于jQuery實(shí)現(xiàn)音樂(lè)播放試聽(tīng)列表
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)音樂(lè)播放試聽(tīng)列表的相關(guān)資料,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)仿微軟首頁(yè)感應(yīng)鼠標(biāo)變化滑動(dòng)窗口效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿微軟首頁(yè)感應(yīng)鼠標(biāo)變化滑動(dòng)窗口效果,基于jQuery響應(yīng)鼠標(biāo)事件簡(jiǎn)單實(shí)現(xiàn)動(dòng)畫(huà)效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10jQuery UI實(shí)現(xiàn)動(dòng)畫(huà)效果代碼分享
這篇文章給大家總結(jié)了jQuery UI實(shí)現(xiàn)動(dòng)畫(huà)效果的實(shí)例代碼,有需要的朋友們可以參考測(cè)試下。2018-08-08基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area2010-08-08jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來(lái)介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03JQuery使用$.ajax和checkbox實(shí)現(xiàn)下次不在通知功能
這篇文章主要介紹了JQuery使用$.ajax和checkbox實(shí)現(xiàn)下次不在通知功能,本文給出HTML代碼、JS代碼、和后端JAVA代碼完整示例,需要的朋友可以參考下2015-04-04jQuery autocomplate 自擴(kuò)展插件、自動(dòng)完成示例代碼
jquery-lib版本是 1.3.2的,該插件是簡(jiǎn)單的擴(kuò)展插件,代碼也比較簡(jiǎn)單的封裝。所以看起來(lái)也比較簡(jiǎn)單不是很費(fèi)力,當(dāng)然封裝得也不是很好。2011-03-03jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞
jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞,鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)并提示,離開(kāi)后,繼續(xù)滾動(dòng),實(shí)現(xiàn)的代碼如下,需要的朋友可以看看2014-08-08