How to add support for HTML5 input types? I want to do some simple client side validation.

sockbot

The input field types supported by Editor (https://editor.datatables.net/reference/field/) seems to be a subset of the input field types supported in HTML5 (https://www.w3schools.com/tags/att_input_type.asp).

I'd like to be able to use the email and tel input types as a simple way to do client side validation. Is there a way that I can change the way Editor creates the input fields so it supports the type "email" and "tel"?

tangerine

Editor's PHP libraries have a validator for email.
https://editor.datatables.net/manual/php/validation#Strings

I don't see the point of HTML5's "tel" input type, as there is no universal standard for entering telephone numbers and it is not supported by most browsers.

allan

Use the attr option of the default text field type to alter the type attribute - e.g.:

{
  label: 'E-mail:',
  name: 'email',
  attr: {
    type: 'email'
  }
}

Allan

sockbot

I tried this, but the email and telephone fields are still not being validated. Editor is not showing any error in the console so I'm not sure how to diagnose this.

  {
    label: "Crew Owner Email:",
    name: 'crewowner.email',
    attr: {
      type: 'email',
    },
  },
  {
    label: "Crew Owner Phone Number:",
    name: 'crewowner.phonenumber',
    attr: {
      type: 'tel',
    },
  },

allan

Have you used the :valid pseudo selector to highlight the field if it is invalid? See the MDN documentation for an over view on this.

The form won't just automatically not submit if an invalid e-mail address is entered - you would need to listen on preSubmit and check if the fields are valid or not.

Keep in mind also that client-side validation is trivial to bypass, which is why the Editor examples focus on server-side validation.

Generally I would recommend using HTML5 input types with styling as a validation hint to the end user only.

Allan