Creating new forms for your website seems easy enough – you take a design, add some HTML and CSS to make it look pretty, and add some validation to it. However, that approach may cause some headaches in the future, since you’re doing more work to create something that is less Magento friendly. Here are the reasons why using default Magento forms will save you time, and make your forms Magento friendly.
In default Magento forms, there are built-in validation tools available. For example, in an input box, the classes ‘required-entry’ and ‘validate-email’ are for validation purposes. This means that the email entry is required, and that the value must match the regex of an email address.
<input class=”required-entry validate-email” id=”email” type=”text” name=”email” value=”” />
Upon validation, it will add a ‘validation-passed’ or ‘validation-failed’ class to the field depending on if it passed or failed. In doing so, Magento has added a validation advice and an icon to notify the user of the validation result.
Here is an example of a failed validation:
Different validation messages:
Different validation messages, even more detailed:
Useful Validation Classes
The following are some useful validation classes:
- required-entry – This entry is required
- validate-select – This select option must select an option
- validate-zero-or-greater – Must be 0 or greater
- validate-one-required – At least one must be selected
- validate-date – A valid date must be entered
- validate-email – A valid email address (email@example.com) must be entered
- validate-phoneStrict / validate-phoneLax – Validates phone numbers
- validate-alphanum – Can only have alphanumeric characters and underscore
- validate-alpha – Can only have characters that are a-z or A-Z
Having Magento validate your input will also save the user from having to submit and refresh the page if the user has an invalid input.
2. Reusing the same controller
Although it varies on what you want to achieve, it is generally good practice to reuse code whenever possible. Custom functions can be added after extending the default Magento controller. Since the default forms and controllers have matching names for input, there won’t be any need to modify the code except for only the inputs you have added. Also, it will be easier to see which of your inputs are custom and which are not, since the only ones in your controller will be the custom ones.
This goes hand-in-hand with reusing code, but is mentioned again as themed styling is such an important benefit from using default Magento forms. If you use default templates for creating custom forms, you will have the same class names for your HTML elements. This means that the styling you have done for this page can be carried onto other pages (if you want it to). This can save you from having to style every custom template you create.
So next time you need to create a custom form, see if you can copy it from default Magento and make your modifications from there!