Как работают форматы ввода и валидация данных в HTML5? В чем различие между встроенной и кастомной валидацией?

HTML5 ввел множество новых типов ввода и улучшил механизм валидации данных в формах. Это позволяет разработчикам создавать более интерактивные и удобные веб-приложения с меньшими затратами времени на написание пользовательского кода.

Форматы ввода в HTML5:
Некоторые новые типы ввода включают:

• <input type="email">: Проверяет, что введенное значение имеет формат email (например, user@example.com).

• <input type="url">: Проверяет, что введенное значение соответствует формату URL (например, https://example.com).

• <input type="number">: Ограничивает ввод только числами и может включать атрибуты для задания диапазона (например, min и max).

Встроенная валидация:
HTML5 обеспечивает встроенную валидацию форм, которая происходит автоматически при отправке. Если данные не соответствуют установленным требованиям (например, неправильный формат email), браузер покажет сообщение об ошибке и предотвратит отправку формы. Например:

<form>    
	<label for="email">Email:</label>    
	<input type="email" id="email" required>    
	<button type="submit">Отправить</button> 
</form>

Если пользователь введет неверный email, браузер уведомит его об этом.

Кастомная валидация:
Кастомная валидация позволяет разработчикам добавлять собственные правила проверки данных. Это делается с помощью JavaScript и событий, таких как submit или input. Например, вы можете создать проверку на основе определенного условия:

const form = document.querySelector('form'); 
form.addEventListener('submit', function(event) {    
	const email = document.getElementById('email').value;    
	if (!email.endsWith('@example.com')) {        
		alert('Email должен заканчиваться на @example.com');        
		event.preventDefault(); // предотвращает отправку формы    
	} 
});

Сравнение:

• Встроенная валидация: Автоматическая проверка данных на соответствие заданным типам, без необходимости писать дополнительный код.

• Кастомная валидация: Позволяет создавать более сложные и специфичные проверки, которые не могут быть выполнены стандартными средствами.

Оба подхода могут использоваться вместе для обеспечения наилучшего пользовательского опыта и повышения качества вводимых данных.