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

Во время создания этого блога, я долго думал, что делать с комментариями – нужен ли ajax, как лучше сделать проверку полей и прочее.

Первоначально я решил ограничиться простой JavaScript-валидацией, через некоторое время я начал использовать jQuery на блоге, теперь вот подумываю об AJAX-добавлении комментов.

Конечно, в WordPress уже существует валидация по умолчанию, но во-первых она на php, то есть если ты ошибся при заполнении формы, то придётся возвращаться на предыдущую страницу, во-вторых дизайн страницы с ошибками отличается от дизайна сайта и наконец в-третьих, я использую английский WordPress для того, чтобы сократить объём потребляемой им памяти, а в этом случае страница с ошибками будет на английском языке.

HTML-форма комментариев

<form action="" method="post" onSubmit="return checkall()" name="commentform" id="commentform">
	<label for="author">Имя * <span id="au"></span></label>
	<input type="text" name="author" id="author" onBlur="validateName()" value="" />
	<label for="email">E-mail * <span id="em"></span></label>
	<input type="text" name="email" id="email" onBlur="validateEmail()" value="" />
	<label for="comment">Комментарий:<span id="co"></span></label>
	<textarea name="comment" id="comment" onBlur="функция-проверки-комментария()"></textarea>
	<input name="submit" type="submit" id="submit" value="Отправить" />
</form>

Дальше пойдёт код, надеюсь вы имеете представление о том, как подключать скрипты 🙂

Как это работает: если поле заполнено неправильно, то комментарий не отправится и выведется сообщение об ошибке в <span> с определенным id.

Функция проверки email на javascript

function validateEmail(){
	var x=document.forms["commentform"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		document.getElementById('em').innerHTML = '(некорректный)';
		return false;
	} else {
		document.getElementById('em').innerHTML = '';
		return true;
	}
}

Функция проверки имени

function validateName(){
	var x=document.forms["commentform"]["author"].value;
	if (x.length < 3) {
		document.getElementById('au').innerHTML = '(мин. 3 символа)';
		return false;
	} else {
		document.getElementById('au').innerHTML = '';
		return true;
	}
}

Точно таким же образом можно написать и функцию проверки комментария, например, чтобы он не был пустым, или был длиннее 10 символов.

Теперь надо подключить общую функцию, которая будет вызывать предыдущие при нажатии на кнопку «Отправить».

function checkall(){
	if(validateEmail() && validateName()) return true;
	else return false;
}

Кстати говоря, если хотите, чтобы у вас появлялся курсор в поле при наведении (брался фокус), то просто добавьте в теги input и textarea следующее:

onMouseOver="this.focus();"
Миша Рудрастых Разработчик WordPress WooCommerce

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

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также