Fork me on GitHub

Options

The default option values can be overridden by passing new values to the method. With these options the plugin is completely customizable.


Option Description
validate A map for the validation-options: "onBlur", "onSubmit", "onKeyup" and "fields".
{
onBlur Determines whether to trigger the "valid" and/or "invalid" callback-functions "onBlur". Possible values: true, false, "valid" or "invalid". True by default.
onSubmit Determines whether to trigger the "valid" and/or "invalid" callback-functions "onSubmit". Functionality is the same as for the "validate.onBlur"-option. True by default.
onKeyup Determines whether to trigger the "valid" and/or "invalid" callback-functions "onKeyup". Functionality is the same as for the "validate.onBlur"-option. False by default.
fields A map for the field-validation-options: "hidden", "disabled" and "filter".
{
hidden Determines whether to validate ":hidden" fields. False by default.
disabled Determines whether to validate ":disabled" fields. False by default.
filter Function that receives all fields and returns the ones to validate.
function( $fields ) {
    return $fields;
}
}
}
supportHtml5 Determines whether the plugin should check for HTML5 attributes and type-values. If false, the script loads faster. True by default.
customValidations A map of key/value customized validation functions (class-name/function). Empty by default.
fields A map for the callback-functions: "onValidate", "onValid" and "onInvalid" for all fields.
{
onValidate Triggered before the field will be validated, empty by default. Receives two parameters:
  • $form: A jQuery-object of the HTML-elemnt the plugin was executed on.
  • language: The value for the "language"-option passed in the configuration.
onValid Triggered after the field was validated to be valid. By default, the class "invalid" is removed from the field. Parameters are the same as for the "onValidate"-function.
onInvalid Triggered after the field was validated to be invalid. By default, the class "invalid" is added to the field. Parameters are the same as for the "onValidate"-function.
}
form A map for the callback-functions: "onReset", "onValidate", "onValid" and "onInvalid" for the form.
{
onReset Triggered before the field will be reset, empty by default. Receives one parameter:
  • language: The value for the "language"-option passed in the configuration.
onValidate Triggered before the form will be validated, empty by default. Parameters are the same as for the "onReset"-function.
onValid Triggered after the form was validated to be valid, empty by default. Parameters are the same as for the "onReset"-function.
onInvalid Triggered after the form was validated to be invalid. By default, the plugin alerts an error-message. Receives two parameters.
  • $fields: A jQuery object of the invalid fields.
  • language: The value for the "language"-option passed in the configuration.
}
language A string of the language to use in the callback-functions, could come in handy on multiple-language-websites.
The default "form.onInvalid" supports "EN" (default), "NL", "DE" and "ES".
selectPlaceholder Globally specify the <option> for the placeholder.
If not a number, the <option> with selected="selected" is used.
0 by default.
keepAttributes An array of the HTML5 attributes that should not be removed from the markup.
By default, only the "pattern" attribute isn't removed, to preserve a customized onscreen keypad.
If the array contains "placeholder" (and the "supportHtml5"-option is set to true and the browser has support for placeholders), the default placeholder behavior will be kept intact.


Determine when to validate.
By default, the plugin validates "onBlur" and "onSubmit". this can be overridden by using the two "validate"-options.

$( "#myForm" ).validVal({
	validate: {
		onKeyup: "valid"	// set a field to "valid" onKeyup
	}
});


Adding custom value-validations.
To add a custom value-validation, simply add a function to the "customValidations"-option.

$( "#myForm" ).validVal({
	customValidations: {
		"key": function( val ) {
			if ( val == "condition" ) {
				return true;
			} else {
				return false;
			}
		}
	}
});

Now add the "key" to the fields class. For HTML5 usage, add it to the data-vv-validations attribute.

// HTML4 / XHTML
<input class="key" />

// HTML5
<input data-vv-validations="key" />


Using a custom "invalid-handler".
Specify custom functions to trigger after validating the fields.

$( "#myForm" ).validVal({
	fields: {
		onInvalid: function( $form, language ) {
			$(this).effect("highlight", { "color": "ff0000" }, 3000);
			$(this).next().show();
		},
		onValid: function( $form, language ) {
			$(this).next().hide();
		}
	}
});

Specify custom functions to trigger after validating the form.

$( "#myForm" ).validVal({
	form: {
		onInvalid: function( $fields, language ) {
			alert( "Please enter a valid " + $fields.first().attr( "name" ) );
		}
	}
});

Custom events »

Share to FacebookShare to TwitterStumble itMore...