Magento uses Prototype as javascript library. It provides a simple way to validate html form values.
Below is an example:
<form name=”my-form” id=”my-form” method=”post”>
<label for=”firstname”>
< ?php echo $this->__(‘First name’) ?> <span>*</span></label><br />
<input id=”firstname” name=”firstname”
class
=
"input-text required-entry"
/><label for=”lastname”>
< ?php echo $this->__(‘Last name’) ?> <span>*</span></label><br />
<input id=”lastname” name=”lastname”
class
=
"input-text required-entry"
/></form>
<script type=”text/javascript”>
//< ![CDATA[
var customForm = new VarienForm('my-form');
//]]>
</script>
In the form above you can see each input field has its own class name and these classes will be used to validate field’s value. There are many predefined classes like that in prototype lib. I’ll show you all of them at the end of this topic.
Most important thing besides assigning class names is that little piece of JavaScript below the form. Remember to pass form id into the new VarienForm object.
Basically, that’s it. Constructing the form this way, automatically makes your form reuse already existing validation code which is being used by the rest of the shop.
Below is a full list of validate class and its error message that I found in prototype lib.
- validate-select
- required-entry
- validate-number
- validate-digits
- validate-alpha
- validate-code
- validate-alphanum
- validate-street
- validate-phoneStrict
- validate-phoneLax
- validate-fax
- validate-date
- validate-email
- validate-emailSender
- validate-password
- validate-admin-password
- validate-cpassword
- validate-url
- validate-clean-url
- validate-identifier
- validate-xml-identifier
- validate-ssn
- validate-zip
- validate-date-au
- validate-currency-dollar
- validate-one-required
- validate-one-required-by-name
- validate-not-negative-number
- validate-state
- validate-new-password
- validate-greater-than-zero
- validate-zero-or-greater
- validate-cc-number
- validate-cc-type
- validate-cc-type-select
- validate-cc-exp
- validate-cc-cvn
- validate-data
- validate-css-length
- validate-length
No comments:
Post a Comment