You can use the <validate> tag to make sure that the user inserts the right value into the option field based on the type of option. This tag generates a script that makes a particular type of validation based on the type of validation you want.The validation starts when you try to save configuration from the orange action button on the admin theme option panel.
The following are the several types of validation:
• validate-alpha: This checks if the value inserted is text.
• validate-alphanum: This checks if the value inserted is alphanumeric.
• validate-email: This checks if the value inserted is a valid e-mail address.
• validate-greater-than-zero: This checks if the value inserted is a number greater than zero.
• validate-not-negative-number: This checks if the value inserted is a non-negative number.
• validate-number: This checks if the value inserted is a number.
• validate-password: This checks if the value inserted has at least six characters.
• color: This particular validation is the one we inserted now in the module.
It enables the color picker:
Let’s create an example with a validation for a number. If we want to validate the field for a telephone, just add the following code inside the <telephone></telephone> tags:
<validate>validate-password</validate> Once you save, go to admin and try to insert the word Hello inside the input text for Telephone Number. Try to save, and you will get an alert message.
Defining default values for options fields:
Another cool task that you can do with the module is set default options for the module. Doing this is very simple. Open the config.xml file and within the <config></config> node, insert the <default></default> tag and inside it, all the options you created with the default values that you want to set. For example, consider the following code:
<!-- set default configurations --> <default> <themeoptions> <header> <menu_bg>CCCCCC</menu_bg> </header> </themeoptions> </default>
In this case, the default value of the menu_bg field will be CCCCCC.
If you set default options after you save the module configuration page at least once, you will no longer see the default value set because the system will store the empty value field (if you save an empty value field).
In this chapter, we have seen how to create a custom and powerful theme options panel. With this great tool you created, the theme can be easily used by everyone,including the store manager who doesn’t have programming knowledge.Let’s create your own admin panel with all the options you have in mind and render your theme unique and powerful!
In the next chapter, we will have a quick recap of all the files and how to collect them in a single ZIP file, and selling it in famous marketplaces such as ThemeForest.