基于Prototype扩展的表单验证
2006-10-30 15:21
701 查看
Really easy field validation with Prototype
I wanted a robust javascript validation library that was simple to implement and didn't require me do any extra work other than creating the form. My favourite idea for a method of doing this is to utilise the field elements' class attribute to indicate what sort of field it is and hence any validation requirements. There are a few javascript libraries that implement that idea like wForms, but, since I'm currently hell-bent on re-writing all my javascript using Prototype, I thought I'd see how difficult or easy it would be to roll my own. Turns out that this is just the sort of thing that is easy with Prototype. [Updated!] : new version 1.5.3! - Now under the MIT license.Instructions
I decided the basic method would be to attach to the form's onsubmitevent, read out all the form elements' classes and perform validation if required. If a field failed validation, reveal field validation advice and prevent the form from submitting.
So here it is in it's first usable, albeit basic, form.
Include the javascript libraries:
<script src="prototype.js" type="text/javascript"></script> <script src="validation.js" type="text/javascript"></script>
[/code]
You write elements like this:
<input class="required validate-number" id="field1" name="field1" />
[/code]
passing the validation requirements in the
classattribute.
You then activate validation by passing the form or form's
idattribute like this:
<script type="text/javascript"> new Validation('form-id'); // OR new Validation(document.forms[0]); </script>
[/code]
It has a number of tests built-in but is extensible to include your custom validation checks.
The validator also avoids validating fields that are hidden or children of elements hidden by the CSS property
display:none. This way you can give a field the class of 'required' but it's only validated if it is visible on the form. The demo illustrates what I am talking about
Demo
Here's a demo!Options
Here's the list of classes available to add to your field elements:required(not blank)
validate-number(a valid number)
validate-digits(digits only)
validate-alpha(letters only)
validate-alphanum(only letters and numbers)
validate-date(a valid date value)
validate-email(a valid email address)
validate-url(a valid URL)
validate-date-au(a date formatted as; dd/mm/yyyy)
validate-currency-dollar(a valid dollar value)
validate-one-required(At least one textbox/radio element must be selected in a group - see below*)
*To use the
validate-one-requiredvalidator you must first add the class name to only one checkbox/radio button in the group (last one is probably best) and then place all the input elements within a parent element, for example a div element. That way the library can find all the checkboxes/radio buttons to check and place the validation advice element at the bottom of the parent element to make it appear after the group of checkboxes/radio buttons.聽
When the validation object is initialised you can pass the option
{stopOnFirst : true}to enable the stop on first validation failure behaiour. The demo above has this set to false which is the default. If set to true only the first validation failure advice will be displayed when the form is submitted instead of all at once.
<script type="text/javascript"> new Validation('form-id',{stopOnFirst:true}); </script>
[/code]
You can also pass the option
{immediate : true}to enable field valiation when leaving each field. That is on the onblur event for all the form elements.
By default the library will add an event listener to the form's onsubmit event and stop the event if the validation fails. If you pass the option
{onSubmit : false}it wont do that. This way you can call the validate function manually within your own javascript.
By default the library will focus on the first field that contains an error. If you pass the option
{focusOnError : false}it wont do that.
You can also pass the option
{useTitles : true}to make the field validators use the form elements' title attribute value as the error advice message.
You can set callbacks by using the options
{onFormValidate : yourFunction, onElementValidate : yourFunction}.聽
onFormValidate is called after form validation takes place and takes two arguments: the validation result (true or false) and a reference to the form. OnElementValidate is called after each form element is validated and also takes 2 arguments: the validation result (true or false) and a reference to the form element.
Instead of using the error message in the validator you can create your own validation advice page element. Now when the script is creating the advice element it first looks for an element with an id matching
'advice-' + validation-class-name + '-' + element.idand if not found then one matching
'advice-' + element.id. If your form element does not have an id attribute then match the name attribute. If it finds an element it will make that one appear. See the 'Donation' field in the demo for an example. If you make a custom validation advice element make sure you set the style to
display : none .
Also if you reference the effects.js file from Scriptaculous in your page head, it'll use a fade-in effect for the validation advice.
<script src="effects.js" type="text/javascript"></script>
[/code]
CSS Hooks
As well as the validation css classes above, the validation library uses CSS classes to indicate validation status:validation-failedand
validation-passed
The validation advice element has a class of
validation-adviceand an id matching the following pattern
'advice-' + validation-class-name + '-' + element.id
so if the field '
birthdate' uses the '
validate-date' validation class then the validation advice element will have an id of '
advice-validate-date-birthdate'.
Javascript API
By default the class attaches an event observer to the form's onsubmit event. If you prefer to do the form submit via javascript yourself you can still validate the form like this:<script type="text/javascript"> var valid = new Validation('form-id', {onSubmit:false}); var result = valid.validate(); </script>
[/code]
The instance method, validate(), will return true or false.聽
The class has an instance function which resets all the field validation:
<script type="text/javascript"> var valid = new Validation('form-id'); valid.reset(); </script>
[/code]
Note that it doesn't reset the form, just the validation.
The Validation class also has some static methods that can be used independantly.
Validation.validate([element OR element id] [, options])
[/code]
This validates the field (or field with that id), using all validation classes present. You can also pass the option
{useTitle : true}to make the field validator use the form element's title attribute value as the error advice message.
You can run a specific validation test on a field or field value by doing this:
Validation.get('validator-name').test(value [, element]);
[/code]
To add your own validator do this:
Validation.add('class-name', 'Error message text', function(value [, element]) { return /* do validation here */ });
[/code]
For example here's one of the in-built ones:
Validation.add('validate-alpha', 'Please use letters only (a-z) in this field.', function (v) { return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v) });
[/code]
When you add a new validator it is added to a static group of validation methods with the class name as key. You then must use the class in the form elements to use your custom validation function.
To make adding mupltiple custom validators easier you can use
Validation.addAllThese()like this:
Validation.addAllThese([ ['required', 'This is a required field.', function(v) { return !Validation.get('IsEmpty').test(v); }], ['validate-number', 'Please use numbers only in this field.', function(v) { return Validation.get('IsEmpty').test(v) || !isNaN(v); }], ['validate-digits', 'Please use numbers only in this field.', function(v) { return Validation.get('IsEmpty').test(v) || !/[^/d]/.test(v); }] ]);
[/code]
You pass an array, where each element of the array is an array with 3 elements: [className, error, function]
Support Forum聽
There's a forum available for questions, suggestions, submitting your custom validators and such聽Download
The demo can be downloaded as a zip file under the MIT License, same as Prototype and Scriptaculous.Change Log
Version 1.5.3
Added small change to better support radio/checkbox elements. The validation advice message is shown at the bottom of the parent element of all the radio/checkboxes; i.e. at the end of the group of elements.Added example 'validate-one-required' validator for checkbox/radio elements
Version 1.5.2
Added 2 callback options: onFormValidate and onElementValidate, thanks for the idea John FarrarFixed URL validator,thanks Bruno
Fixed advice text on number validators, thanks Ade
Fixed number validator validating space as valid, thanks Rob McDonagh
Changed isEmpty validator so that a value of only whitespace is no longer considered empty聽
Version1.5.1
Oops聽Version 1.5
Added support for using the title attribute as the error advice text as per xav's ideaAdded support for forms with elements with no id attributes
The field element is now passed as a reference to the validate function to enable more complex validators
Added support for multiple form instances for the focusOnError option聽
Added URL validator from聽 Marcus Bointon聽
Improved date-au validator from Tanvir
Started using Insertion.After from prototype for compatibility reasons as per xav's suggestion
Completed some code reorganisation to support future directions
Version 1.4
Custom field validation advice as per Sidney's ideaFixed internal check property name - make consistant with general object property notation i.e. camelcase it
Behaviour change: Error advice nodes are now hidden instead of removed when not needed
Version 1.3
Added reset function as per Paul Shannon's ideaAdded focusOnError option, thanks Ted Wise for the idea and some demo code
Fixed a typo, thanks Analgesia!
Version 1.2.1
Removed $ shortcuts from main code body (There's a worry on the mailing list about polluting the global namespace with an alphabet of $ functions. So, they are commented out in code, you can uncomment them if you want them)Version 1.2
New 'immediate:true' option to add onblur validation to form elements. Thanks Mike Rumble !Version 1.1
Added new function Validator.addAllThese()Validator now respects hidden form elements
code tidy-up
Updated demo
聽
Linkography
wForms wForms javascript library from The Form AssemblyPrototype Prototype javascript framework
Scriptaculous Scriptaculous home page
forum available Dexagogo Forum!
MIT License
Bruno
Ade
Rob McDonagh
Marcus Bointon Marcus Bointon
Sidney's
Paul Shannon's Pauls home page
Mike Rumble Mike's home page
Tags
javascriptexperiments
prototype
相关文章推荐
- 转一个好东西,表单验证类(扩展基于prototype的validation.js)
- 真正简单的基于prototype的表单验证
- 基于 prototype 实现的表单验证
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- 转 ASP.NET基于表单的验证实现网上安全访问,管理(2)
- ASP.NET 完成基于表单的身份验证
- 基于jQuery的表单验证插件:jValidate
- KISSYUI的表单前端js验证和JQuery扩展插件Validate
- sharepoint 基于AD的Form表单身份验证
- 一个可以基于Ajax提交的表单验证
- java web之基于表单的身份验证
- 基于Jquery Validate 的表单验证
- 利用策略模式与装饰模式扩展JavaScript表单验证功能
- 基于PHP+Ajax实现表单验证的详解
- jQuery 表单验证扩展(四)
- 基于jQuery实现表单提交验证
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
- SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用
- 基于prototype扩展的JavaScript常用函数库