Inline form validation engine error scroll to top

Disclaimer: The information provided on DevExpress.com and affiliated web properties [including the DevExpress Support Center] is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confindential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Directory [?] [-] Options parameter Description Optional Use method load CSS file load JavaScript file add ID to form plus ID to control and set validation type set validation validation type API method validationengine Chinese version jquery Powerful form verification plug-in a simple description of the use of the tutorial to introduce jquery and Plug-ins JSCSS initialization plug-in You can also click the Submit button before triggering validation the default is to start validation after the mouse loses focus, which is bound to the Blur event. See the following configuration to change the location of the hint layer Ajax validation Mode

//blog.csdn.net/andyliulin/

Precautions:

1. Demo version is v2.2.4;

2.v2.0 The following version parameters are not fully generic;

Modify the validationEngine.jquery.css file as follows:

1. Prompts the content font to change the song body;

2. Remove the private properties of each browser [each browser already supports rounded corners and shadows and no longer need to add private properties].

Modify the jquery.validationEngine.js file as follows:

1. Field.focus [] of 312 lines; Comment out, when there is an input control inside the Table, validation causes the phenomenon to return to the top;

Modify the jquery.validationengine-zh_cn.js file as follows:

1. Modify some of the hint text;

2. Increase the validation rules for the two pairs of Chinese characters: MINSIZECN and MAXSIZECN;

3. Remove "Validate2fields": {"Alerttext": "* Please enter HELLO"},

Merge the above two JS files

View Demo

Modified version: JQuery Validation Engine v2.2.4 Chinese version

Original: JQuery Validation Engine v2.2.4 "Options parameter description" [optional]

name Default Value Description Validationeventtrigger "Blur" Events that trigger validation, and support events refer to the description of the JQuery event.

PS: You can set to NULL if you want to validate only when the form is submitted.

Scroll True The screen scrolls automatically to where the first validation is not passed Focusfirstfield True Whether to get focus on the first failed control when validation fails Promptposition "TopRight" Verify the location of the hint information, can be set to: "TopRight", "Bottomleft", "Centerright", "BottomRight" Autopositionupdate False Whether to automatically adjust the position of the hint layer Bindmethod "Bind" Verify how the event is bound, and can be set to: Bind, Live

PS: Set Live It seems that the binding event is invalid, but the form submission can be validated and recommended not modified. [Demo]

binded False Whether other events have been bound, set to true will not be validated. Inlineajax False Ajaxformvalidation False Validating forms with Ajax Ajaxformvalidationurl False Set the URL for Ajax validation by default using the Action property of form Ajaxvalidcache {} Onajaxformcomplete $.noop form submission, Ajax validation completed behavior [Function] [Demo] Onbeforeajaxformvalidation $.noop After the form submission validation rule is passed, Ajax validates the behavior [Function] [Demo] Onvalidationcomplete False Behavior of form submission validation when completed [Function]

Two parameters can be obtained: form element and validation result [ture or false] [Demo]

Onsuccess False Real-time validation of what happens when all projects are passed [Function] [Demo] OnFailure False Real-time validation of the behavior [Function] that occurs when there are failed projects [Demo]

Ps:onsuccess and onfailure are not valid when real-time authentication is disabled. For example, Validationeventtrigger is set to NULL, or Bindmethod is set to live

Isoverflown False Whether the form is inside an overflow-scrolling element [that is, the external element is set Overflow:scroll]

PS: When set to ture, the insertion position of the prompt content is changed to insert before the validated control;

At this point, you need to set an element in the outer layer of the control, setting the class= "Inputcontainer"

Overflowndiv "" An overflow-scrolling element is set, in the form of a jQuery selector. Showarrow True IsError False Invalidfields []

"Use Method" Load CSS file

Loading JavaScript files

validate[required] means that the control must be filled out with an ID, but it does not require the same Name >

Setting up Validation

Call $ ["

form_id"] directly. Validationengine [];

The custom parameter calls $ ["

form_id"]. Validationengine ["Attach", {
promptposition: "Centerright", 
scroll:false 
}];

"Authentication type"

Note: The validation rules are written in validate[], and if there are more than one rule, split them in English commas [,]. example: Validate[required,minsize[6],custom[onlyletternumber]] >

name Sample Description Required Validate[required] Indicates required fields Optional Validate[optional] Represents an option. If you do not enter, do not require required, if there is input, then verify that it meets the requirements. Daterange[name] VALIDATE[DATERANGE[GRP1]] Verify Date Range Datetimerange[name] VALIDATE[DATETIMERANGE[GRP1]] Validation date and time range Minsize[int] VALIDATE[MINSIZE[6]] Minimum number of characters entered Maxsize[int] VALIDATE[MAXSIZE[20]] Maximum number of characters entered Grouprequired[name] VALIDATE[GROUPREQUIRED[GRP2]] Enter at least one item in the group Min[int] VALIDATE[MIN[1]] Minimum value [this is the minimum value of the number, note the distinction between the minsize] Max[int] VALIDATE[MAX[9999]] Maximum value [This is the maximum value of the number, note the distinction with maxSize] Past[date] VALIDATE[PAST[2012/12/20]] Dates must be in the future of date or date. Date format can be written yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d, or now Future[date] Validate[future[now]] Date must be in the past of data or date. Date format can be written yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d, or now Maxcheckbox[int] VALIDATE[MAXCHECKBOX[2]] The maximum number of items selected [for a checkbox] Mincheckbox VALIDATE[MINCHECKBOX[2]] Minimum number of items selected [for checkbox] equals Validate[equals[id]] The current control value needs to be the same as the value of the ID control Phone Validate[custom[phone]] Verifying phone numbers Email Validate[custom[email]] Verify Email Address Integer Validate[custom[integer]] validating integers Number Validate[custom[number]] Verifying numbers Date Validate[custom[date]] Validation date, in the form of Yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d DateFormat Validate[custom[dateformat]] Verify date format in Yyyy/mm/dd, yyyy/m/d, YYYY-MM-DD, yyyy-m-d DateTimeFormat Validate[custom[datetimeformat]] Validation date and time format: Yyyy/mm/dd hh:mm:ss am| Pm IPv4 Validate[custom[ipv4]] Verify IPv4 Address Url Validate[custom[url]] Verify URL address, starting with //, //, or ftp:// Onlynumbersp VALIDATE[CUSTOM[ONLYNUMBERSP]] Only fill in numbers and spaces Onlylettersp VALIDATE[CUSTOM[ONLYLETTERSP]] Only accept the written letter [case] and single quotation mark ['] Onlyletternumber Validate[custom[onlyletternumber]] Only accept numbers and English letters Ajax Validate[ajax[ajaxusercallphp]] customizing in validation rules

"ajaxusercallphp": {

"url": "Phpajax/ajaxvalidatefielduser.php",

"Extradata": "Name=eric",

"Alerttextok": "* This account name can be used",

"Alerttext": "* This name has been used by others",

"Alerttextload": "* is confirming that the account name is used by other people, please wait a moment. "

}

Funccall Validate[funccall[functionname]] Calling external functions

"API Methods"

name Sample Description Attach $ ["

form_id"]. Validationengine ["Attach"]; Registration Form Validation Events Detach $ ["

form_id"]. Validationengine ["detach"]; Canceling the Registration form verification event Validate Alert [$ ["

form_id"]. Validationengine ["Validate"]; Validating the form, returning the result to TRUE or false Validatefield Alert [$ ["

form_id"]. Validationengine ["Validatefield", "

element_id"]]; Validates a single control, returns the result true or false Showprompt $ ["

element_id"]. Validationengine ["Showprompt", "Hint content", "load"]; Create a hint on this element, 3 states: "Pass", "error", "Load" Hideprompt $ ["

element_id"]. Validationengine ["Hideprompt"]; Hide the contents of the hint for this element Hide $ ["

form_id"]. Validationengine ["Hide"]; Close hints in a form Hideall $ ["

form_id"]. Validationengine ["Hideall"]; Close all tips on the page Updatepromptsposition $ ["

form_id"]. Validationengine ["Updatepromptsposition"] Update the location of the hint layer

validationengine Chinese version-jquery powerful form verification plug-in Chinese version, the official only English. At the same time, some validation rules have been modified according to Chinese conditions.

This plugin supports most browsers, but due to the use of the CSS3 Shadow and fillet style, in IE browser can not see the rounded corners and shadow effects [evil IE].

Official Download Address: //www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Examples of common validation: //www.position-relative.net/creation/formValidator/

Examples of AJAX validation: //www.position-relative.net/creation/formValidator/demoSubmit.html

A: A brief description of the use of the tutorial: introduction of jquery and Plug-ins js, css

Jquery.validationengine-en.js is a language file, all the prompts are found in this file, can be easily translated into other languages, and you can also customize their own validation rules in this file. Initialize the plug-in $ [document]. Ready [function [] {$ [

formID]. Validationengine []}]

Validation rules are written in the class attribute of the form element. For example:

Chủ Đề