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

JavaScript, Комментарии  /  33 комментария

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

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

Хочу порекомендовать вам также видеоурок по созданию формы комментариев на AJAX.

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

Пишем JavaScript-валидацию полей формы комментария в WordPress

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

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

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

  • commentform – ID самой формы
  • author – ID поля имени автора комментария
  • label[ for="author" ] – лейбл поля имени автора коммента (сюда будем выводить ошибки)
  • email – ID поля ввода электронного адреса
  • label[ for="email" ]
  • comment – ID поля самого текста комментария
  • label[ for="comment" ]

Шаг 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 );
 
} );

Если же в вашей теме jQuery не подключен и вы получаете ошибку что-то типа:

jQuery is not defined в консоли браузера
jQuery is not defined в консоли браузера

В таком случае подключаем jQuery:

wp_enqueue_script( 'jquery' );

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 33

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал