Вступление #

Для работы валидации можно использовать класс .js-form-validation по умолчанию. Валидация формы реализована на базе Constraint Validation API.

Установка #

Пример разметки и инициализации валидации для отдельной формы.

	<form class="js-form-validation">
		<input
			type="text"
			name="username"
			placeholder="Ваше имя"
			required
		/>

		<input
			type="email"
			name="email"
			placeholder="Ваш email"
			autocomplete
			required
		/>

		<input
			type="tel"
			name="phone"
			pattern=".{16,16}"
			placeholder="Ваш телефон"
			data-validation-options='{
				"messageError": "Телефон должен быть в формате +7(XXX)XXX-XX-XX."
			}'
			required
		/>

		<textarea
			name="message"
			cols="30"
			rows="10"
			placeholder="Сообщение(не обязательно)"
		></textarea>

		<button
			class="button button--brand"
			type="submit"
		>
			Отправить
		</button>
	</form>

const options = {
	className: {
		form: {
			main: 'my-validation-form',
			init: 'my-validation-form-init',
		},

		field: {
			main: 'my-validation-field',
			valid: 'my-validation-field--valid',
			invalid: 'my-validation-field--invalid',
		},

		message: {
			main: 'my-validation-message',
			show: 'my-validation-message--show',
			error: 'my-validation-message--error',
			content: 'my-validation-message__content',
		}
	},
}

BasicFormValidation.init('.my-form', options)
BasicFormValidation.init(document.querySelector('.my-form'), options)
BasicFormValidation.init(document.querySelectorAll('.my-form'), options)

// или

BasicFormValidation.init() // по умолчанию инициaлизирует элементы с классом .js-form-validation

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-validation-options #

В значение указываются параметры для гибкой настройки валидации отдельных полей.

	<input
		type="tel"
		name="phone"
		pattern=".{16,16}"
		placeholder="Ваш телефон"
		data-validation-options='{
			"messageContainer": "#container-validation-message",
			"messageError": "Телефон должен быть в формате +7(XXX)XXX-XX-XX."
		}'
		required
	/>
	<div id="container-validation-message"></div>

	<input
		type="file"
		name="file"
		placeholder="Загрузите файл"
		data-validation-options='{
			"maxSize": {
				"value": "2097152",
				"messageError": "Превышен максимально допустимый размер файла(<b>2МБ</b>)."
			}
		}'
		required
	/>

Параметры:

Методы #

isValid() #

Проверить статус валидации формы. В ответ возращает одно из значений:

• true — Форма проходит валидацию;
• false — Форма не проходит валидацию.

BasicFormValidation.isValid('.my-form-validation') // принимает значение типа Object или String

update() #

Обновить список полей и статус валидации формы.

BasicFormValidation.update('.my-form-validation') // принимает значение типа Object или String

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

const myFormValidation = document.querySelector('.my-form-validation')

console.log(myFormValidation.BasicFormValidation) // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

validation:change #

Срабатывает при изменении значений полей.

Параметры:

const myFormValidation = document.querySelector('.my-form-validation')

myFormValidation.addEventListener(
	'validation:change',
	function () {
		console.log(event.detail) // параметры
	},
	false,
)