解决jQuery.validationEngine v2.6.1不使用默认提示(showPrompt)的问题
2012-10-17 00:45
513 查看
近日,我把最流行的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>标签;同样通过验证后,也需要进行类似操作。代码如下:
对于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:
但是大家可能注意到,我在对form初始化验证框架时传进了一个参数notShowPrompt:
当然了,增加这样一个自定义参数是有用处的,我在框架调用提示的函数_showPrompt中使用了options.notShowPrompt,对是否提示进行了判断,代码如下:
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>标签;同样通过验证后,也需要进行类似操作。代码如下:
$(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:
$("#form4log").validationEngine({"notShowPrompt": true}); $("#form4reg").validationEngine({"notShowPrompt": true});而且这个参数并不是官方文档中定义的options!对,这个是我自定义的,我对框架进行了修改,增加了一个判断是否填出调试的参数:notShowPrompt,默认为false。
(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 ajax validation ajaxFormValidationMethod: 'get', // Ajax form validation callback method: boolean onComplete(form, status, errors, options) // retuns false if the form.submit event needs to be canceled. onAjaxFormComplete: $.noop, // called right before the ajax call, may return false to cancel onBeforeAjaxFormValidation: $.noop, // Stops form from submitting and execute function assiciated with it onValidationComplete: false, // Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messages doNotShowAllErrosOnSubmit: false, // Object where you store custom messages to override the default error messages custom_error_messages:{}, // true if you want to vind the input fields binded: true, // set to true, when the prompt arrow needs to be displayed showArrow: true, // did one of the validation fail ? kept global to stop further ajax validations isError: false, // Limit how many displayed errors a field can have maxErrorsPerField: false, // Caches field validation status, typically only bad status are created. // the array is used during ajax form validation to detect issues early and prevent an expensive submit ajaxValidCache: {}, // Auto update prompt position after window resize autoPositionUpdate: false, InvalidFields: [], onFieldSuccess: false, onFieldFailure: false, onSuccess: false, onFailure: false, addSuccessCssClassToField: false, addFailureCssClassToField: false, // Auto-hide prompt autoHidePrompt: false, // Delay before auto-hide autoHideDelay: 10000, // Fade out duration while hiding the validations fadeDuration: 0.3, // Use Prettify select library prettySelect: false, // Add css class on prompt addPromptClass : "", // Custom ID uses prefix usePrefix: "", // Custom ID uses suffix useSuffix: "", // Only show one message per error prompt showOneMessage: false, notShowPrompt: false//!!!!!!!!自定义参数!!!!!!!!!!!!!!! }}; $(function(){$.validationEngine.defaults.promptPosition = methods.isRTL()?'topLeft':"topRight"}); })(jQuery);
当然了,增加这样一个自定义参数是有用处的,我在框架调用提示的函数_showPrompt中使用了options.notShowPrompt,对是否提示进行了判断,代码如下:
_showPrompt: function(field, promptText, type, ajaxed, options, ajaxform) { if(options.notShowPrompt)//如果定义notShowPrompt为true,则不进行提示,直接return return; var prompt = methods._getPrompt(field); // The ajax submit errors are not see has an error in the form, // When the form errors are returned, the engine see 2 bubbles, but those are ebing closed by the engine at the same time // Because no error was found befor submitting if(ajaxform) prompt = false; if (prompt) methods._updatePrompt(field, prompt, promptText, type, ajaxed, options); else methods._buildPrompt(field, promptText, type, ajaxed, options); },
相关文章推荐
- DNN中使用jQuery Validation时常见问题及解决方法(jQuery Validation with DNN Tips)
- 页面中使用已经引入的jquery插件,结果却提示JS报错找不到函数【问题解决】
- jQuery Validation Engine data-prompt-position自定义提示层位置
- jQuery选择器优化问题,使用$('#a .b')等,IDE会提示这是低效的用法的解决
- 中文乱码问题 ? 原因:JSP中默认使用iso-8859-1字符编码方式,不支持中文 ? 常见的支持中文的编码方式:gb2312(常用简体汉字)、gbk(简体和繁体汉字)、utf-8 ? 解决中文乱码
- IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
- 使用jquery validation engine判断为空的时候要根据input的type
- 弹框中使用百度地图BMap.Autocomplete,下拉提示框被覆盖问题解决
- JQueryValidationEngine常见问题
- jQuery中ajax的使用和缓存问题解决
- 使用JQUERY解决AJAX的跨域问题
- 使用Jquery的鲜活绑定(lively-ness),解决“新添加的元素,事件不可用”的问题
- 问题备忘:解决在debian8系统中Java使用非东八区时区作为默认时区
- jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
- 使用clojure命令行工具lein repl时一直提示连接被拒绝问题解决
- jquery 和其他js框架同时使用的不兼容问题解决方法
- 解决ssh中使用struts2验证框架提示错误后正确无法提交的问题
- jquery.validate中使用remote,remote相同值不校验问题解决
- jQuery对象和DOM对象转换,解决jQuery对象不能使用js方法的问题
- ASP.NET中UpdatePanel与jQuery同时使用所遇问题解决