读书人

解决jQuery.validationEngine v2.6.1不

发布时间: 2012-11-07 09:56:10 作者: rapoo

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

$("#formID").bind("jqv.form.result", function(event, errorFound) {  if(errorFound)     alert("There is a problem with your form");});
但是大家可能注意到,我在对form初始化验证框架时传进了一个参数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); },







读书人网 >Web前端

热点推荐