解决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>标签；同样通过验证后，也需要进行类似操作。代码如下：

$(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 validationvalidationEventTrigger: "blur",// Automatically scroll viewport to the first errorscroll: true,// Focus on the first inputfocusFirstField:true,// Opening box position, possible locations are: topLeft,// topRight, bottomLeft, centerRight, bottomRightpromptPosition: "topRight",bindMethod:"bind",// internal, automatically set to true when it parse a _ajax ruleinlineAjax: 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 validationajaxFormValidationMethod: '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 cancelonBeforeAjaxFormValidation: $.noop,// Stops form from submitting and execute function assiciated with itonValidationComplete: false,// Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messagesdoNotShowAllErrosOnSubmit: false,// Object where you store custom messages to override the default error messagescustom_error_messages:{},// true if you want to vind the input fieldsbinded: true,// set to true, when the prompt arrow needs to be displayedshowArrow: true,// did one of the validation fail ? kept global to stop further ajax validationsisError: false,// Limit how many displayed errors a field can havemaxErrorsPerField: 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 submitajaxValidCache: {},// Auto update prompt position after window resizeautoPositionUpdate: false,InvalidFields: [],onFieldSuccess: false,onFieldFailure: false,onSuccess: false,onFailure: false,addSuccessCssClassToField: false,addFailureCssClassToField: false,// Auto-hide promptautoHidePrompt: false,// Delay before auto-hideautoHideDelay: 10000,// Fade out duration while hiding the validationsfadeDuration: 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，则不进行提示，直接returnreturn;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); elsemethods._buildPrompt(field, promptText, type, ajaxed, options); },