当前位置:编程学习 > JAVA >>

解决jQuery.validationEngine v2.6.1不使用默认提示(showPrompt)的问题

近日,我把最流行的Jquery表单验证插件jQuery.validationEngine v2.6.1应用在一个很漂亮的后台模板中,但是对jQuery.validationEngine v2.6.1的默认提示样式感到一些遗憾,因为这个提示是在input标签的右上方(默认)显示,并且仅有增加提示文字这样一种单调的效果。因为模板提供了一种很漂亮的错误提示风格,所以jQuery.validationEngine v2.6.1默认效果不太符合我的要求,我需要按照我自己的要求进行定制。但是我翻看jQuery.validationEngine v2.6.1的文档http://posabsolute.github.com/jQuery-Validation-Engine/,却没有取消Tip提示但是仍然保证跟以前一样的验证风格和流程的设置options。下面讲一下我是如何对jQuery.validationEngine v2.6.1做了一丁点改变达到目的的:

首先,我在表单页面脚本中对每个input绑定验证结果的事件“jqv.field.result”,框架会在验证后调用这个事件的处理函数。在函数中,我根据input是否通过验证errorFound来进行我自定义的DOM操作。如果有错误,我把“invalid”样式类添加到input,并且移除可能紧随input的验证正确的<span>标签,然后在input后面紧随添加一个验证错误的<span>标签;同样通过验证后,也需要进行类似操作。代码如下:

[javascript] 
$(document).ready(function() {  
                         
            $("input").bind("jqv.field.result",function(event,field,errorFound,prompText){ 
                if(errorFound){ 
                    field.removeClass("valid"); 
                    field.addClass("invalid"); 
                    if(0<field.next(".valid-side-note").length) 
                        field.next(".valid-side-note").remove(); 
                    if(0==field.next(".invalid-side-note").length) 
                        field.after('<span class="invalid-side-note">'+prompText+'</span>'); 
                }else{ 
                    field.removeClass("invalid"); 
                    field.addClass("valid"); 
                    if(0<field.next(".invalid-side-note").length) 
                        field.next(".invalid-side-note").remove(); 
                    if(0==field.next(".valid-side-note").length) 
                        field.after('<span class="valid-side-note"></span>'); 
                } 
                errorFound==false; 
                //$("input").validationEngine('autoHidePrompt',true); 
            }) 
            $("#form4log").validationEngine({"notShowPrompt": true}); 
            $("#form4reg").validationEngine({"notShowPrompt": true}); 
        }) 

对于Hooks函数,文档中有介绍:
The plugin provides some hooks using jQuery bind functionality.
jqv.form.validating : Trigger when the form is submitted and before it starts the validation process
jqv.field.result(event, field, errorFound, prompText) : Triggers when a field is validated with the result.
jqv.form.result(event, errorFound) : Triggers when a form is validated with the result
An example of binding a custom function to these events would be:
$("#formID").bind("jqv.form.result", function(event, errorFound) {
  if(errorFound)
     alert("There is a problem with your form");
});
但是大家可能注意到,我在对form初始化验证框架时传进了一个参数notShowPrompt:
[javascript] 
$("#form4log").validationEngine({"notShowPrompt": true}); 
$("#form4reg").validationEngine({"notShowPrompt": true}); 
而且这个参数并不是官方文档中定义的options!对,这个是我自定义的,我对框架进行了修改,增加了一个判断是否填出调试的参数:notShowPrompt,默认为false。
[javascript] 
(function($) { 
 
     "use strict"; 
 
     var methods = { 
         }; 
         $.validationEngine= {fieldIdCounter: 0,defaults:{ 
 
        // Name of the event triggering field validation 
        validationEventTrigger: "blur", 
        // Automatically scroll viewport to the first error 
        scroll: true, 
        // Focus on the first input 
        focusFirstField:true, 
        // Opening box position, possible locations are: topLeft, 
        // topRight, bottomLeft, centerRight, bottomRight 
        promptPosition: "topRight", 
        bindMethod:"bind", 
        // internal, automatically set to true when it parse a _ajax rule 
        inlineAjax: false, 
        // if set to true, the form data is sent asynchronously via ajax to the form.action url (get) 
        ajaxFormValidation: false, 
        // The url to send the submit ajax validation (default to action) 
        ajaxFormValidationURL: false, 
        // HTTP method used for aja

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,