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

JavaScript  /  48 комментариев

Во время создания этого блога, я долго думал, что делать с комментариями — нужен ли 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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

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

Оставить комментарий

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.