Standard microformats
Forms
Field validator
Format:
1.
2. |
<label class="cm-email cm-required" for="elm_id">Field name:</label>
<input type="text" name="test" value="Y" id="elm_id" /> |
Element label, assigned to the validated element with parameter for, is required for validator of the form fields.
Microformat of the field validation is defined in the class attribute of the element label, and classes can be combined. The label even if it is hidden, must have a description, as this description is used in the message about the incorrectly entered field. Within these messages the following placeholders can be used:
[field] – replaced by a label description, if 1 parameter is passed to the message generation function, for example:
1.
2. |
var msg = 'The field [field] is not valid';
this.form_message(msg, lbl); |
[field1], [field2] – replaced by a description of main and additonal labels, if 2 parameters are passed to the message generation function, for example:
1.
2. |
var msg = 'The field [field1] do not match field [field2]';
this.form_message(msg, lbl1, lbl2); |
[extra] – additional data that is to be displayed in the message:
1.
2.
3. |
var msg = 'The field [field] should be set to the following format: [extra]';
var extra = '1AB-CF5';
this.form_message(msg, lbl, null, extra); |
List of microformats:
cm-required – the element is required to be filled out. If assigned to a check box, the check box is to be checked.
cm-email – the element value must be a valid e-mail address.
cm-confirm-email – necessarily assigned to a pair of elements, the second of which is to have the same ID as the first one, but with the prefix confirm_. It checks whether the values of these fields are valid e-mail addresses and are the same.
cm-phone – the element value must be a valid telephone number.
cm-zipcode – the element value must be a valid zip code (every country has its own zip code format, so the pattern is to be defined in the country table, but so far manually – the array zip_validators).
cm-integer - the element value must be an integer.
cm-password - necessarily assigned to a pair of elements, their values must be the same.
cm-multiple – at least one value of the element select is to be selected.
cm-all – selects all options of the element select before sending a form.
cm-custom – a validator defined by a user. Also requires to indicate the validation function (returns true if no error occurred and an error text otherwise). Example:
1.
2.
3.
4.
5.
6.
7.
8. |
<label for="a" class="cm-custom (check)"><input type="input" id="a" value="" />
<script type="text/javascript">
function fn_check(id)
{
return (1 == 1) ? true : 'Not valid';
}
</script> |
The function accepts only one parameter - ID of the validated element.
cm-regexp - checks the value for consistency with the regular expression. It is required that the regular expression is defined in the regexp global array with the element ID. Example:
1.
2.
3.
4.
|
<label for="a" class="cm-regexp"><input type="input" id="a" value="" />
<script type="text/javascript">
regexp['a'] = {regexp: "^[A-Za-z]+$", message: "Please, use only alphabetical signs"};
</script> |
Highlighting and sending of forms
Format:
The microformat is defined by CSS class of the tag form. Classes can be combined.
-
cm-form-highlight – turns on highlighting of this form (only for the admin panel)
-
cm-ajax – the form will be sent by AJAX. For the correct work there should be a hidden element with the name result_ids
1. |
<input type="hidden" name="result_ids" value="id1, id2" /> |
Sending a form with a click on any NOT input[type=submit] element
Format:
1. |
<input type="radio" name="a" value="b" class="cm-submit" /> |
The microformat is defined by CSS class of the element. Classes can be combined.
Sending the form to a new or a parent window
Format:
1.
2. |
<input type="submit" name="a" value="b" class="cm-new-window" />
<input type="submit" name="a" value="b" class="cm-parent-window" /> |
The microformat is defined by CSS class of the tag input. Classes can be combined.
-
cm-new-window – when clicked, a new window will be opened and the form will be sent there
-
cm-parent-window – when clicked, the form will be sent to a parent window
Prohibition of sending a form
Format:
1. |
<input type="submit" name="a" value="b" class="cm-no-submit" /> |
The microformat is defined by CSS class of the tag input. Classes can be combined.
Skipping field validation in a form
Format:
1. |
<input type="submit" name="a" value="b" class="cm-skip-validation" /> |
The microformat is defined by CSS class of the tag input. Classes can be combined.
Checkboxes manipulation
Format:
1.
2.
3.
4.
5.
6. |
<input type="checkbox" name="check_all" value="Y" class="cm-check-items" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item" />
<input type="checkbox" name="product_ids[]l" value="2" class="cm-item" />
<a href="#" name="check_all" class="cm-check-items on">Check all</a>/<a href="#" name="check_all" class="cm-check-items off">Uncheck all</a> |
There are 2 types of checkboxes manipulation:
- Via the main checkbox
- Via links
The control element must have the name "check_all" and the class check-items. If the control element is a link, the classes on and off are to be also specified (they turn on and off all checkboxes)
Manageable elements must have the class item.
The class process-items can be assigned to the button sending the form. In this case when the button is clicked on, the corresponding group of checkboxes will be checked to find out whether the checkboxes are off or on. If none of them is on, a message will be displayed.
 |
If there are several groups of checkboxes in the form and they should be controlled separately, unique suffixes are to be added to the classes cm-check-items, cm-item and cm-process-items, for example:
|
| |
| |
1.
2.
3. |
<input type="checkbox" name="check_all" value="Y" class="cm-check-items-group" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item-group" /> |
Other HTML elements
Links
There is a microformat that allows to execute AJAX request when clicking on a link. Format of this link:
1. |
<a href="index.php?dispatch=products.update&product_id=15" class="cm-ajax" rev="id1, id2, idn">Run</a> |
The parameter rev contains tag IDs separated with comma. Tags with these IDs can be updated.
The microformat is defined by CSS class of the tag a. Classes can be combined.
-
cm-ajax – AJAX request will be executed when clicking on a link
-
cm-delete-row – when clicking on the element with this class, the nearest parent element tr is deleted. It is used to delete a row in a table.
-
cm-ajax-cache – allows to cache AJAX requests, should be used together with cm-ajax.
-
cm-ajax-force – allows to execute js code from the ajax response for the second time. It should be used together with cm-ajax.
When it is necessary to click on an element with the known ID, you can use a link with the class cm-external-click. ID of the element that should be clicked on is specified in the parameter rev of the link.
1. |
<a class="cm-external-click" rev="external_elm">Push me</a> |
Other elements
-
cm-confirm – when clicked, confirmation of the action will be requested.
-
cm-noscript – this element will be shown only if javascript support is enabled in a browser
Popups
The microformat popup-box is available for popups. It allows to close a popup with a click outside its area.
Format:
To hide a popup with a click on some element inside its area, it is necessary to define the class cm-popup-switch for this element.
Format:
1.
2.
3.
4. |
<div class="cm-popup-box">
<strong class="hand cm-popup-switch">Close</strong>
...
</div> |
1.
2.
3. |
<div class="cm-popup-box">
...
</div> |
Elements combinations
It is used to hide/display container and show its state. It is used , for example, for the button advanced search in the admin panel, for trees (categories, pages), etc. By 'state', it is meant display of different images depending on the mode of the container. There are two options.
Option 1
1.
2.
3.
4.
5.
6. |
<img src="" id="on_cat" class="cm-combination" />
<img src="" id="off_cat" class="cm-combination" />
<a href="#" id="sw_cat" class="cm-combination">
...
<div id="cat">
</div> |
Additional elements use ID with different prefixes. There are 3 types of prefixes.
-
on_ - for the image expanding a container when it is clicked on (usually it is the plus sign)
-
off_ - for the image collapsing a container when it is clicked on (usually minus)
-
sw_ - for the element (usually it is a link) that switches the container mode with each click
Option 2
1.
2.
3.
4. |
<a href="#" id="sw_cat" class="cm-combo-on|off cm-combination">
...
<div id="cat">
</div> |
In this case the images are changed by changing the class for the switch (see sw_ above).
-
cm-combo-on - for the image expanding a container (usually, plus)
-
cm-combo-off - for the image collapsing a container (usually, minus)
So the classes cm-combo-on, cm-combo-off with the corresponding pages should be defined in CSS. As there could be several combinations, the class should not be defined globally, it should be assigned to some specific element.
Switching combinations
To switch combinations (for example, to display/hide all elements of the tree) the microformat cm-combinations is used.
ID here is used ONLY to group these two elements. Also, there is an ability to group combinations (for instance, several trees on a page). To do this it is necessary to add a suffix:
1.
2.
3.
4.
5.
6.
7.
8.
9. |
<img src="" id="on_abc" class="cm-combinations-a" />
<img src="" id="off_abc" class="cm-combinations-a hidden" />
...
<img src="" id="on_cat" class="cm-combination-a" />
<img src="" id="off_cat" class="cm-combination-a" />
<a href="#" id="sw_cat" class="cm-combination-a">
...
<div id="cat">
</div> |
In this case when clicking on the upper images, only combinations from the group 'a' will be shown/hidden.
Saving the mode
To save the state of the container, it is necessary to assign the class cm-save-state to each element expanding/collapsing it. In this case cookies connected with the ID of this element will be set. State by default – 'container is hidden'. If you need that the default state is 'container is shown', the microformat cm-ss-reverse should be assigned in addition. It is required to check whether the cookies are set and to hide elements in a template.
Tabs
<div class="cm-tabs"> is generated in Smarty and a list of tabs <li id="description" class="cm-js"> is generated inside it. When clicking on a tab, div with ID equal to content_ + id (id of the tab which is clicked on) is searched for automatically (in our case it is content_description) and after that displayed. At the same time all adjacent divs are hidden in the container.
Secondary microformats
cm-skip-avail-switch – used for the function switchAvailability (switches on/off all the elements within the specified one). If an element has this class, it is not switched on back.
Validating the elements values
cm-value-integer – assigned to elements of the form (input, textarea, etc...). When the value is entered, it is checked for being an integer number.
1.
2. |
<img src="" id="on_cat" class="cm-combinations" />
<img src="" id="off_cat" class="cm-combinations hidden" /> |
