Magento Themes and Magento Extensions

Easy Form Validation in magento

Share

Magento provides some Default classes for validating form elements in frontend. We can make use of those existing
class names for our custom forms and reuse the client side validation code of Magento.
Let’s see a couple of examples from magento source code

1. Adding the required class to any field label will give the asterisk to be appear in red color indicating it is

the mandatory field

<label for="name" class="required"><em>*</em></label>
2. If you want to make a field mandatory just add required-entry class in the input tag as shown below
<input name="name" id="name" class="input-text required-entry" type="text">
3. If you want to validate the field value entered by the user there is a seperate class available.
This type of classes will be used when you have fields such as
email, telephone etc. To validate an email field use validate-email class in your input tag.
<input name="email" class="input-text required-entry validate-email" type="text">
4. To validate a password field use validate-password which will force the users to enter 6 or more characters .
<input name="password" class="input-text required-entry validate-password"
type="password">
5. To Check Password Confirmation use validate-cpassword
<input name="confirm-password" class="input-text required-entry validate-
cpassword" type="password">
6. Other classes available in magento for validating various fields.
validate-select -     Generate a warning message to select an option from dropdown.

         validate-url        - To accept valid url as input

         validate-phoneStrict  - For phone number validation

         validate-date - Date validation
If you are familiar with Prototype Javascript framework you can even add your own validate class to the js framework.
7. And finally we need to pass the form id to the javascript to make it work
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('your-form-id-here', true);
//]]>
</script>
The Validation will look as shown below

Leave a Reply

You must be logged in to post a comment.