Solve the problem that jQuery. validationEnginev2.6.1 does not use the default prompt (showPrompt ).

Recently, I put Jquery, the most popular jQuery Form Verification plug-in. validationEnginev2.6.1 is applied in a very beautiful background template, but for jQuery. the default prompt style of validationEnginev2.6.1 is a bit regrettable, because the prompt is in the upper right corner of the input tag (... syntax

Recently, I put Jquery, the most popular jQuery Form Verification plug-in. validationEngine v2.6.1 is applied in a very beautiful background template, but for jQuery. the default prompt style of validationEngine v2.6.1 is a bit regrettable, because the prompt is displayed in the upper-right corner of the input label (default), and only the monotonous effect such as adding prompt text. Because the template provides a very beautiful error prompt style, the default Effect of jQuery. validationEngine v2.6.1 does not meet my requirements. I need to customize it according to my own requirements. But I read the jQuery. validationEngine v2.6.1 documentation. The following describes how I made a slight change to jQuery. validationEngine v2.6.1 to achieve my goal:

First, I bind the verification result event "jqv. field. result" to each input in the form page script. The framework will call the event processing function after verification. In the function, I perform custom DOM operations based on whether the input passes errorFound verification. If an error occurs, I add the "invalid" style class to the input, remove the correct tag that may be followed by the input, and then add a label that is followed by the input; similar operations are also required after verification. The Code is as follows:

[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 });
})

For Hooks functions, this document describes:
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 wocould be:
$ ("# FormID"). bind ("jqv. form. result", function (event, errorFound ){
If (errorFound)
Alert ("There is a problem with your form ");
});
However, you may notice that when I initialize the form Verification Framework, a parameter notShowPrompt is passed:
[Javascript]
$ ("# Form4log"). validationEngine ({"notShowPrompt": true });
$ ("# Form4reg"). validationEngine ({"notShowPrompt": true });
This parameter is not the options defined in the official document! Yes, this is my custom. I modified the framework and added a parameter to determine whether to fill in the debugging: notShowPrompt. The default value is 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 pretaskselect 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 //!!!!!!!! Custom parameters !!!!!!!!!!!!!!!
 
}};
$ (Function () {$. validationEngine. defaults. promptPosition = methods. isRTL ()? 'Topleft': "topRight "});
}) (JQuery );

Of course, adding such a custom parameter is helpful. I used options. notShowPrompt in the function _ showPrompt prompted by the framework call, and determined whether the prompt is displayed. The Code is as follows:

[Javascript]
_ ShowPrompt: function (field, promptText, type, ajaxed, options, ajaxform ){
If (options. notShowPrompt) // if notShowPrompt is defined as 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 );
},