Form Validation

User input validation in Tom Select is built on standard validation protocols introduced by HTML5. As a user changes the items of a Tom Select instance, values are updated on the original <input> or <select> element where validity is then determined. Validation criteria can be defined on the original <input> using required, pattern, type, and other standard validation attributes.

To communicate the validation state of an input, Tom Select again gracefully falls back on the default browser functionality. You can also enhance your communication with custom styles and messages with a few lines of JavaScript.

Browser Defaults

Browsers will prevent users from submitting this form unless the <select required> field has a value. Your browser may display a message along the lines of "Please fill out this field" when trying to submit the form.

new TomSelect('#select-person',{
	create: true,
	sortField: {
		field: 'text',
		direction: 'asc'
	}
});

<form>
	<select id="select-person" placeholder="Select a person..." required>
		<option value="">Select a person...</option>
		<option value="4">Thomas Edison</option>
		<option value="1">Nikola</option>
		<option value="3">Nikola Tesla</option>
		<option value="5">Arnold Schwarzenegger</option>
	</select>
	<div class="py-3">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>

Bootstrap

With a few changes, you can enhance your communication with features provided by frameworks like Bootstrap.

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.

Then, within your submit listener, you can either add the was-validated class to the form or toggle the is-invalid class on the Tom Select wrapper.

var my_select = new TomSelect('#select-bootstrap');


// Example starter JavaScript for disabling form submissions if there are invalid fields
var form = document.getElementById('bootstrap-form')
form.addEventListener('submit', function (event){

	// add was-validated to display custom colors
	form.classList.add('was-validated')

	if (!form.checkValidity()) {
		event.preventDefault()
		event.stopPropagation()
	}

}, false)

<form id="bootstrap-form" novalidate>
	<select class="form-select" id="select-bootstrap" required placeholder="Select a person..." name="beast">
		<option value="">Select a person...</option>
		<option value="4">Thomas Edison</option>
		<option value="1">Nikola</option>
		<option value="3">Nikola Tesla</option>
		<option value="5">Arnold Schwarzenegger</option>
	</select>
	<div class="invalid-feedback">
      Please select a person
    </div>
	<div class="py-3">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>

Pattern Attribute

Tom Select works with validation attributes other than just the required attribute.

new TomSelect('#pattern',{
	create: true,
});

<form>
	<input id="pattern" required pattern="[a-z]+">
	<div class="py-3">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>