Valid Library

Last updated: 1 month ago

Category: Form

The Valid validation module performs value validation on form fields. It requires the form field to have a 'name' attribute and is best used within a 'form' node. When submitting the form, 'validate' supports secondary validation. It also supports asynchronous Ajax validation. Built-in validations include value type checks, value strength checks, string inclusion checks, numerical range checks, and quantity checks. Additionally, it supports custom validation methods.

Principles

The essence of form validation is comparing the value of an input with a specified value - if they match, the result is true, otherwise false.

1. First we need to find the input object. The first parameter target of this module may not necessarily be an input itself - it could be a div or other tag. When the target is an input, we get the value directly from it. If not, we try to find the first form field (input, select or textarea) among its child nodes as the input.
2. Once the input object is found, we get its value. Input values are strings by default. If we're comparing value counts, we need to convert the string value to an array and use the array's length for comparison. The string separator is controlled by the separator parameter in the module, defaulting to comma ,.
3. If the input value is empty, it should default to passed=true (validation passes). However, there are cases where it should be considered passed=false, such as with required validation, count< (value count less than) or count<= (value count less than or equal to) validations.
4. Multiple validations should be allowed for a single input. If any validation fails, output passed=false. Only when all validations pass should we output passed=true.
5. Validation types shouldn't be limited to local types - asynchronous remote validation should be allowed through ajax methods interacting with remote php or java files, returning standardized results (in object format containing at least a passed property).
6. Validation results should emphasize failures (fail) rather than successes (succ). Only error messages can correct user input. Error messages should at least include: field name (name), field label (label), current field value (value), and comparison data (data).
7. Validation results should allow customization, whether using this framework's tools or external ones.
8. In practice, meaningful form fields should have two characteristics: they should have a name attribute, and they should exist within some form container. Therefore, this module will disable validation for fields without names. If a form field isn't in a form container, field names under document.body shouldn't be duplicated.
9. Since there are many ways to change input values, we can't rule out cases where values change without triggering validation. Therefore, we need to listen for the form's submit event and revalidate all validation items in the form upon submission.

Basic Usage

Add the oc-valid attribute to text form fields to indicate required validation. A _valid container will be automatically created below the form field to show validation results.

Note: Form field validation requires a name attribute to ensure the field is valid and meaningful.

You can also create instances using id+new syntax:

Required Validation

This is the default validation type. Set via the type parameter as type:'required'.

Placement Options

The placement parameter controls where validation messages appear. Default is empty (inserts after form field). Possible values:

• message: Shows as Message alert popup
• popup: Shows as Popup bubble (empty bubble)
• down: Finds nearest _field->_field-cont container and inserts there
• right: Finds nearest _field->_field-help container and inserts there
• #id or DOM node: Inserts into specified element

Trigger Methods

Change validation triggering via the trigger parameter:

• blur: Triggers when input loses focus (default), best for input and textarea
• change: Triggers when input value changes AND loses focus, best for file, select, upload, radio(s) and checkbox(es)
• input: Triggers in real-time during typing, best for input, textarea, upload, radio(s) and checkbox(es)
• load: Validates immediately when page finishes loading

Validating Native Form Fields

Perfectly supports validation for all types of native form fields.

Validating Custom Form Fields

Also supports validation for this framework's custom form fields.

The most common are input and textarea components. Since the number component is essentially a text field, their validation methods are the same.

file, upload, select and datetime components all require manual selection, so their validation methods are similar, typically using change trigger.

radio(s) and checkbox(es) are similar components with similar validation methods.

For single radio or checkbox validation, results are placed below the field by default. For multiple radios/checkboxes, use the placement attribute to specify where to show results.

The range component changes values by dragging a slider, so it typically uses input trigger.

Basic Configuration

Property	Type	Default	Description
label	string	''	Alternate name for form element
placement	'newline'/'popup'/'message'/'right','down'/'#ID'/DOM/''	'newline'	How validation messages are displayed
type	string	'required'	Validation type(s), comma-separated for multiple
parent	string	''	Parent form node selector
separator	string	','	Multi-value separator
nodeName	string	'div'	Message container node name
fail	string	''	Custom error message format
succ	string	''	Custom success message format
message	object	{}	Message module parameters
popup	object	{}	Popup module parameters

Display Configuration

Property	Type	Default	Description
iconShow	boolean	true	Whether to show hint icon
styleHost	boolean	false	Whether to style the host form field
succShow	boolean	true	Whether to show success hints
classes	string	''	Additional style classes

Validation Rule Configuration

Property	Type	Default	Description
extend	object	{}	Extended validation types
regLocal	string	''	Local text character regex
regChars	string	''	Special character regex
lengthStr	number	6	Default character count for strength validation
trigger	'blur'/'change'/'input'/'load'	'blur'	Validation trigger method
ajax	object	{}	Asynchronous validation parameters

Callback Functions

Property	Type	Default	Description
onTrigger	function	null	Callback after event triggers
onChanged	function	null	Callback after state changes
onShown	function	null	Callback after showing
onHidden	function	null	Callback after hiding