Validation

// src/components/patterns/form/form-validation/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/form/form-validation
additionalProperties: false
properties:
  content:
    type: array
    items:
      type: string
      format: html
required:
  - content

// src/components/patterns/form/form-validation/mocks.yaml

content:
  - $tpl: '@patterns/form/layout/layout-fieldset'
    $ref: '@patterns/form/layout/layout-fieldset#full-width'
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#input'
    children:
      attributes:
        id: test1
        required: true
        data-webform-pattern-error: Textfield Error Message
    label:
      title: input with custom error message
      attributes:
        for: test1
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#input'
    children:
      attributes:
        id: test2
        required: true
    label:
      title: input without custom error message
      attributes:
        for: test2
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#input'
    children:
      $tpl: '@fsk/form/form-element/input/input--email'
      $ref: '@fsk/form/form-element/input/input--email'
      attributes:
        id: test3
        required: true
        data-webform-pattern-error: Textfield Mail Error Message
    label:
      title: mail input
      attributes:
        for: test3
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#input'
    children:
      attributes:
        id: zip-element
        required: true
        data-webform-pattern-error: ZipCode Pattern Error Message
        data-webform-required-error: ZipCode Required Error Message
    label:
      title: zip code input
      attributes:
        for: zip-element
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#select'
    children:
      options:
        - type: option
          value: DE
          label: Deutschland
        - type: option
          value: AUT
          label: Österreich
      attributes:
        id: test4
        required: true
        data-webform-pattern-error: Select Error Message
        data-zip-id: zip-element
    label:
      title: select
      attributes:
        for: test4
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#Textarea'
    children:
      attributes:
        id: test5
        required: true
        data-webform-pattern-error: Textarea Error Message
    label:
      title: textarea
      attributes:
        for: test5
  - $tpl: '@fsk/form/fieldset'
    $ref: '@fsk/form/fieldset'
    legend:
      title: Radios
    children:
      $tpl: '@fsk/form/radios'
      $ref: '@fsk/form/radios'
      layout: row
      children:
        $render:
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            label:
              title: Einmalig
              attributes:
                for: input1
            children:
              attributes:
                data-webform-pattern-error: Radios Error Message
                name: myRadios
                id: input1
                value: a
                required: true
          - $tpl: '@fsk/form/form-element'
            $ref: '@fsk/form/form-element#radio'
            label:
              title: Monatlich
              attributes:
                for: input2
            children:
              attributes:
                data-webform-pattern-error: Radios Error Message
                name: myRadios
                id: input2
                value: b
                required: true
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#checkbox'
    children:
      attributes:
        id: test6
        required: true
        data-webform-required-error: Checkbox Error Message
    label:
      title: Checkbox
      attributes:
        for: test6
    description_display: after
    description:
      attributes:
        $drupal: true
      content: >-
        <p>This is a description with a <a
        href="https://greenpeace.de">link</a>.</p>
  - $tpl: '@fsk/form/form-element'
    $ref: '@fsk/form/form-element#submit'
    children:
      $tpl: '@fsk/form/form-element/input/input--submit'
      $ref: '@fsk/form/form-element/input/input--submit'
      attributes:
        class: js-FskButton

// src/components/patterns/form/form-validation/form-validation.html.twig

{#
 # ATTENTION:
 # This template is only relevant for unit tests
 # to be sure that changes in fsk elements don't break the FE logic.
 # It won't be consumed by Drupal
 #}

<form class="PaymentForm js-PaymentForm" onsubmit="return false;">
  {% for item in content %}
    {{ item|raw }}
  {% endfor %}
</form>