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)