Feature: #80186 - Add HTML5 elements and improve the form editor

See Issue #80186 See Issue #80130 See Issue #80128 See Issue #80127 See Issue #80125 See Issue #80126

Description

The form editor contains new selectable form elements

  • email (HTML5)
  • tel (HTML5)
  • url (HTML5)
  • number (HTML5)

The server side 'TYPO3CMSExtbaseValidationValidatorNumberValidator' validator can be used.

renderables:
  -
    type: <formElementType>
    ...
    validators:
      -
        identifier: Number

If a form element is set to be required through the form editor, the html client side validation property "required" will be rendered

Result:

renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        required: 'required'
        ...

If a form element is set to use the 'String length' server side validation through the form editor, the client side validation properties 'minlength' and 'maxlength' will be rendered

Result:

renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        minlength: 2
        maxlength: 3
        ...
    validators:
      -
        identifier: StringLength
        options:
          minimum: 2
          maximum: 3

If a form element is set to use the 'Number range' server side validation through the form editor, the client side validation properties 'min' and 'max' will be rendered

renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        min: 2
        max: 3
        ...
    validators:
      -
        identifier: NumberRange
        options:
          minimum: 2
          maximum: 3

The form editor is able to set the 'pattern' client side validation property

renderables:
  -
    type: <formElementType>
    ...
    properties:
      fluidAdditionalAttributes:
        pattern: '^.*$'

The form editor validators select list will be removed if no validators are available

Impact

It is now possible to add HTML5 elements with its needs.