Powermail 1.6 – Custom JavaScript Validation

Powermail is one of the most mature and recomendable Typo3 extensions for online forms. It is easy to use, extend and maintain. I used it in many different projects with different requirements such as spam protection, visitor registration, questionairs, and many more.

For the 1.6 generation of the extension, the JavaScript part was completly migrated to the jquery framework. In conjunction with this migration, the javascript-based client-side input validation was migrated to the jquery tools validator: http://www.jquerytools.org/documentation/validator/index.html
With this validator, it is still possible to customize the form validation. However, this is not included in the powermail documentation yet and I hope this post will help you to understand how this can be done. If not, just let me know!

The JavaScript Template File
So first, powermail uses a template file containing the frontend javascript validation. This file is imported and parsed by the extension to replace placeholders such as labels and others.
The original file can be found in the extension resources at

typo3conf/ext/powermail/templates/tmpl_frontend.js

You can customize this file, upload it and configure it in your website template either in the constant editor or directly in the constants using:

plugin.powermail.template.frontendJsTemplatePath = path/to/your/templatefile.js

Accessing the powermail Validator Object
In the template file, the powermail validator is created and accessible via the javascript object

powermail_validator.data('validator')

This object provides your access to the validator in your custom code. For example to reset the validation

powermail_validator.data('validator').reset()

Or to trigger the validation

powermail_validator.data('validator').checkValidity()

Register new Validators
Validators can be registered directly for the jquery tools validator in the default way: http://www.jquerytools.org/documentation/validator/index.html#custom

This can be done using the method

$.tools.validator.fn(...);

This method requires 3 parameters:
1. The css selector to register the validator for (e.g. ‘select’ for all select tags or ‘.powermail_uid67’ to reference the powermail field with the id UID67.
2. Error messages for the validator (either a string for the default language or an associative array for multiple languages)
3. The validator function itself. The function get’s two parameters: the field element that is validated and the value to be validated. This function can have different return values: { true: the value is valid; false: The value is invalid; string: The value is invalid and this is the error message to display; object: value is invalid and the object contains localized error messages}

As an example this is the default validation for the select elements:

	// select validation
	$.tools.validator.fn('select', '',
		function(el, value) {
			(el.attr('multiple')) {
				return value != null ? true: '###VALIDATOR_LABEL_ONE_REQUIRED###';
			} else {
				return value.length > 0 ? true : '';
			}
		}
	);

Leave a Comment