DEPRECATION WARNING

This documentation is not using the current rendering mechanism and will be deleted by December 31st, 2020. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Add own global clientside validators

A global validator is something that could normally not be selected by an editor.

Parsley Introduction

Example form, validated with parsley.js, with a required and an email field. In addition to HTML5, this input fields are validated with parsley:

<form data-parsley-validate>
     <input type="text" name="firstname" required="required" />

     <input type="email" name="email" />

     <input type="submit" />
</form>

Own Parsley Validator

Quick example

See how you can relate a JavaScript validator to a field with a data-attribute. In addition we recommend to set the message also via data-attribute:

<input type="text" data-parsley-emailverification="@" data-parsley-emailverification-message="No email address" />
    [...]
<script type="text/javascript">
    window.Parsley.addValidator('emailverification', {
        validateNumber: function(value, requirement) {
            return value.indexOf(requirement) !== -1;
        },
        requirementType: 'string'
    });
</script>

Step by step

Let’s build an own field (look at the section how to easily extend powermail with own fieldtypes) with two fields where the user should add his/her email address twice. A validator should check if both strings are identical.

The example fluid template (partial):

{namespace vh=In2code\Powermail\ViewHelpers}

<div class="powermail_fieldwrap powermail_fieldwrap_type_emailverification powermail_fieldwrap_{field.marker} {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
    <label for="powermail_field_{field.marker}" class="{settings.styles.framework.labelClasses}" title="{field.description}">
        <vh:string.RawAndRemoveXss>{field.title}</vh:string.RawAndRemoveXss><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
    </label>

    <div class="{settings.styles.framework.fieldWrappingClasses}">
        <f:form.textfield
                type="email"
                id="powermail_field_{field.marker}"
                property="{field.marker}"
                value=""
                additionalAttributes="{data-parsley-emailverification-message:'{f:translate(key:\'powermail.validation.emailverification\',extensionName:\'In2template\')}',data-parsley-emailverification:'{field.marker}_mirror'}"
                class="powermail_emailverification {settings.styles.framework.fieldClasses} {vh:Validation.ErrorClass(field:field, class:'powermail_field_error')}" />
    </div>
</div>

<div class="powermail_fieldwrap powermail_fieldwrap_type_emailverification powermail_fieldwrap_{field.marker}_mirror {field.css} {settings.styles.framework.fieldAndLabelWrappingClasses}">
    <label for="powermail_field_{field.marker}_mirror" class="{settings.styles.framework.labelClasses}">
        <f:translate key="writePasswordAgain" /><f:if condition="{field.mandatory}"><span class="mandatory">*</span></f:if>
    </label>

    <div class="{settings.styles.framework.fieldWrappingClasses}">
        <f:form.textfield
                type="email"
                id="powermail_field_{field.marker}_mirror"
                property="{field.marker}_mirror"
                value=""
                additionalAttributes="{data-parsley-emailverification-message:'{f:translate(key:\'powermail.validation.emailverification\',extensionName:\'In2template\')}',data-parsley-emailverification:'{field.marker}'}"
                class="powermail_emailverification {settings.styles.framework.fieldClasses} {vh:Validation.ErrorClass(field:field, class:'powermail_field_error')}" />
    </div>
</div>

The example JavaScript:

/**
 * @returns {void}
 */
var addEmailVerificationValidation = function() {
    window.Parsley.addValidator('emailverification', {
        validateString: function(value, markerMirror) {
            return value === getMirrorValue(markerMirror);
        },
        requirementType: 'string'
    });
};

/**
 * @param {string} marker
 * @returns {string}
 */
var getMirrorValue = function(marker) {
    var elements = document.querySelectorAll('input[name="tx_powermail_pi1[field][' + marker + ']"]');
    return elements[0].value;
};

Documentation

Look at http://parsleyjs.org/doc/examples/customvalidator.html for more examples of individual parsley.js validation

Look at https://github.com/einpraegsam/powermailextended for an example extension. This extension allows you to:

  • Extend powermail with a complete new field type (Just a small “Show Text” example)
  • Extend powermail with an own Php and JavaScript validator (ZIP validator - number has to start with 8)
  • Extend powermail with new field properties (readonly and prepend text from Textarea)
  • Extend powermail with an example SignalSlot (see ext_localconf.php and EXT:powermailextended/Classes/Controller/FormController.php)