Sulu Forms AJAX Validation

Frontend counterpart to the Sulu Forms Ajax Validation Bundle.

Installation

npm i @pawsitiwe/sulu-forms-ajax-validation

Usage

JavaScript

The JavaScript is required and is used for asynchronous live validation.

import { SuluAjaxForm } from '@pawsitiwe/sulu-forms-ajax-validation';

new SuluAjaxForm();

The constructor can accept two parameters:

1. form is the form element on which Sulu Ajax Form should be initialized. Default is document.querySelector('.ajax-form').
2. options is an object used to configure Sulu Ajax Forms. The default values are documented in the table below:

| Option | Typ | Default | Beschreibung | |------------------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------| | classes | object | {  field: 'field',  fieldsWrapper: 'fields',  groupWrapper: 'check-radio-group',  errorContainer: 'error-container',  errorElement: 'error',  errorState: 'has-error',  submitting: 'submitting',  submitButton: 'submit',  apiErrorNotification: 'api-error',  confirmation: 'confirmation'} | Selectors used by Sulu Ajax Forms and states assigned to elements. | | disableOnSubmit | boolean | true | Disables the submit button during the submit request. | | scrollToFirstErrorOnSubmit | boolean | true | Smoothly scrolls to the first validation error after a failed submit. | | focusFirstErrorFieldOnSubmit | boolean | true | Focuses the first validation error field after a failed submit. | | animateConfirmation | boolean | true | Animates the confirmation message after a successful submit. |

Scss

Import

@use "@pawsitiwe/sulu-forms-ajax-validation" as forms;

Usage

Mixins can either be included all at once (recommended) …

@include forms.all();

… or selectively (not recommended).

.example-form-class {
    .example-error-class {
        @include forms.api-error-notification();
    }
    .example-honeypot-field-class {
        @include forms.hide-honeypot-field();
    }
    // ...
}

Configuration

To configure the mixins, use the configure mixin. This must be included before using any other mixins.

@include forms.configure((...));

A full list of configuration options can be found at /src/styles/_config.scss.