Валидация полей формы комментариев на чистом JavaScript

В этом уроке расскажу вам, как делать валидацию форм на чистом JavaScript и также и на jQuery. В качестве примера возьмём форму отправки комментариев в WordPress.

Конечно, в WordPress существует своя валидация полей, но она сделана на PHP и вас будет перенаправлять на другую страницу в случае ошибки.

Итак, вот что в итоге у нас получится:

А теперь давайте приступим.

Шаг 1. Определяемся с атрибутами ID и class формы

Тут всё зависит от того, вы будете создавать валидацию для какой-то своей произвольной формы или же для формы комментариев WordPress, сгенерированной функцией comment_form(). Во втором случае вы можете использовать стандартные значения атрибутов id формы:

Шаг 2. Проверка полей формы на чистом JS

function validate(e) {
 
	let valid = true;
 
	// удаляем все уже существующие ошибки валидации, чтобы проверять по новой
	const errors = document.getElementsByClassName( 'validation-error' );
	while( errors.length > 0 ){
		errors[0].parentNode.removeChild( errors[0] );
	}
 
	// проверяем автора
	const authorField = document.getElementById( "author" );
 
	if ( ! authorField.value ) { // если не заполнено
		document.querySelector( 'label[for="author"]' ).innerHTML += ' <span class="validation-error">Укажите имя</span>';
		valid = false;
	}
 
	// проверяем поле комментария
	const commentField = document.getElementById( "comment" );
 
	if ( ! commentField.value ) { // если не заполнено
		document.querySelector( 'label[for="comment"]' ).innerHTML += ' <span class="validation-error">А где ваш комментарий?</span>';
		valid = false;
	}
 
	// проверяем поле емейла
	const emailField = document.getElementById( "email" );
 
	if ( ! emailField.value ) { // если не заполнено
		document.querySelector( 'label[for="email"]' ).innerHTML += ' <span class="validation-error">Укажите email</span>';
		valid = false;
	} else { // если заполнено, то проверяем на корректность email-адреса регулярным выражением
		const re = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i
		if( ! re.test(String(emailField.value).toLowerCase()) ) {
			document.querySelector( 'label[for="email"]' ).innerHTML += ' <span class="validation-error">Некорректный email</span>';
			valid = false;
		}
	}
 
	if( false == valid ) {
		e.preventDefault(); // предотвращаем отправку формы, если есть ошибки валидации
	}
	return valid;
 
}
 
const form = document.getElementById( 'commentform' );
 
form.addEventListener( 'submit', validate );

Не знаете, куда вставлять этот JavaScript код? Тогда рекомендую посмотреть мой бесплатный видеоурок про правильное подключение JS в WordPress.

Бонус. Валидация формы на jQuery

Зачем запариваться с ванильным JavaScript, если во многих темах WordPress и так по умолчанию подключен jQuery? Это уже решать вам.

function validate(e) {
 
	let valid = true;
 
	// удаляем все уже существующие ошибки валидации, чтобы проверять по новой
	jQuery( '.validation-error' ).remove();
 
	// проверяем автора
	const authorField = jQuery( "#author" );
 
	if ( authorField.val() == '' ) {
		jQuery( 'label[for="author"]' ).append( ' <span class="validation-error">Укажите имя</span>' );
		valid = false;
	}
 
	// проверяем поле комментария
	const commentField = jQuery( "#comment" );
 
	if ( commentField.val() == '' ) {
		jQuery( 'label[for="comment"]' ).append( ' <span class="validation-error">А где ваш комментарий?</span>' );
		valid = false;
	}
 
	// проверяем поле емейла
	const emailField = jQuery( "#email" );
 
	if ( emailField.val() == '' ) {
		jQuery( 'label[for="email"]' ).append( ' <span class="validation-error">Укажите email</span>' );
		valid = false;
	} else {
		const re = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i
		if( ! re.test( emailField.val() ) ) {
			jQuery( 'label[for="email"]' ).append( ' <span class="validation-error">Некорректный email</span>' );
			valid = false;
		}
	}
 
	if( false == valid ) {
		e.preventDefault();
	}
	return valid;
 
}
 
jQuery( function( $ ) {
 
	$( '#commentform' ).submit( validate );
 
} );