validation-mixin

Available from version 0.16

The validation mixin creates a modal dialog before deleting or submitting data.

Used by:

solid-delete

solid-form

Attributes

`confirmation-type`

It is a prerequisite and can take two options :

confirm: to access to a basic modal dialog.

dialog: to get a <dialog> more customizable.

`confirmation-message`

Message displayed in the modal dialog (confirm or dialog type). The message by default is “Please, confirm your choice” in English, “Merci de confirmer votre choix” in French.

The attributes below only concern ``dialog`` type.

`confirmation-submit-text`

Text displayed on the submit button (by default, “Ok” in English, “Oui” in French).

`confirmation-cancel-text`

Text displayed on the cancel button (by default “Cancel” in English, “Annuler” in French).

`confirmation-submit-class`

Submit button class name (undefined by default).

`confirmation-cancel-class`

Cancel button class name (undefined by default).

Some examples of the use of validation mixin attributes :

<solid-delete
    data-src="http://server/user/"
    confirmation-type="confirm"
    confirmation-message="Thank you to confirm the data deletion."
></solid-delete>

<solid-form
    data-src="../data/list/events.jsonld"
    confirmation-type="dialog"
    confirmation-message="Are you sure you want to create this event ?"
    confirmation-submit-text="Yes, I am"
    confirmation-submit-class="submit-button"
    confirmation-cancel-class="cancel-button"
></solid-form>

`confirmation-widget`

Available from version 0.17

Allows to insert a widget in the modal dialog, instead of confirmation-message (confirmation-widget prevails over confirmation-message). The widget can contain a <solid-display> to display data from the resource concerned.

Example of confirmation-widget attribute use :
<solid-widget name="confirm-delete-widget">
    <template>
        <div>
            <p>Are you sure to delete <strong><solid-display fields="name" data-src="${value}" style="display:inline-block"></solid-display></strong> ? </p>
        </div>
    </template>
></solid-widget>

<solid-delete
    data-src="http://server/user/"
    confirmation-type="dialog"
    confirmation-widget="confirm-delete-widget"
></solid-delete>