HTML5 validation

This example shows how Editor can make use of HTML 5 validation attributes for the form inputs. In this example, the first five fields have client-side validation applied to them through the attr option for the fields and optionally the fields.errorText option to set a custom error message.

First name: A required attribute is applied, denoting that the field must have a value. No custom error message is provided, so the default in Editor.defaults.i18n.fields.errorText will be used.
Last name: Matches First name.
Position: Has a minimum length (number of characters) and is required. It also has a custom error message.
Office: Uses a simple regular expression pattern to check that one of the expected values is given.
Extension: Makes use of min and max to ensure that a number is given.

For full details of what validation attributes can be used, please refer to the excellent MDN documentation.

Note that HTML 5 validation happens on the client-side, so you cannot rely on this for data integrity. You must perform validation at the server-side as well, as client-side validation is trivial to bypass. Editor supports client-side validation as it can be a useful and fast way of sanity checking data before using server resources.

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

const editor = new DataTable.Editor({
	ajax: '../php/staff.php',
	fields: [
		{
			label: 'First name:',
			name: 'first_name',
			attr: {
				required: true
			}
		},
		{
			label: 'Last name:',
			name: 'last_name',
			attr: {
				required: true
			}
		},
		{
			label: 'Position:',
			name: 'position',
			attr: {
				minlength: 5,
				required: true
			},
			errorText: 'Position value must have at least 5 characters'
		},
		{
			label: 'Office:',
			name: 'office',
			attr: {
				required: true,
				pattern: "Edinburgh|London|New York|San Francisco|Singapore|Sydney|Tokyo"
			},
			errorText: 'Office location must be one of Edinburgh, London, New York, San Francisco, Singapore, Sidney or Tokyo.'
		},
		{
			label: 'Extension:',
			name: 'extn',
			attr: {
				min: 1000,
				max: 5000,
				required: true,
				type: 'number'
			},
			errorText: 'Extension number must be between 1000 and 5000'
		},
		{
			label: 'Start date:',
			name: 'start_date',
			type: 'datetime'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	],
	table: '#example'
});

new DataTable('#example', {
	ajax: '../php/staff.php',
	columns: [
		{
			data: null,
			render: (data) => data.first_name + ' ' + data.last_name
		},
		{ data: 'position' },
		{ data: 'office' },
		{ data: 'extn' },
		{ data: 'start_date' },
		{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
	],
	layout: {
		topStart: {
			buttons: [
				{ extend: 'create', editor: editor },
				{ extend: 'edit', editor: editor },
				{ extend: 'remove', editor: editor }
			]
		}
	},
	select: true
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

HTML5 validation

Other examples

Simple initialisation

Advanced initialisation

Triggering editing

DataTables as an input

Dates and time

Dropdown input types

DataTables extensions

Inline editing

Bubble editing

API

Standalone

Styling

Plug-ins