html5 默认提示,解决jQuery.validationEnginev2.6.1不使用默认提示（show

迷南。 2022-10-10 02:12 47阅读 0赞

近日，我把最流行的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的验证正确的标签，然后在input后面紧随添加一个验证错误的标签；同样通过验证后，也需要进行类似操作。代码如下：

\[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").remove();

if(0==field.next(".invalid-side-note").length)

field.after(''+prompText+'');

\}else\{

field.removeClass("invalid");

field.addClass("valid");

if(0                        field.next(".invalid-side-note").remove();

if(0==field.next(".valid-side-note").length)

field.after('');

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 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，对是否提示进行了判断，代码如下：

\[javascript\]

\_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);

\},

html5 默认提示,解决jQuery.validationEnginev2.6.1不使用默认提示（show

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关纯 JS 设置文本框的默认提示

相关关闭浏览器前提示_怎么关闭是否设为默认浏览器的提示？

相关解决element里Tooltip 文字提示hover后的默认样式

相关 html5 默认提示,解决jQuery.validationEnginev2.6.1不使用默认提示（show

相关 input和textarea设定提示信息和默认值

相关 HTML提示标签

相关完美解决textarea输入框提示文字，必须添加默认内容

相关 QLineEdit默认提示 setPlaceholderText

相关 CNDS博客，文章发布时提示“请勿使用默认标题”

相关 CSDN写文章-提示请勿使用默认标题