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

Во время создания этого блога, я долго думал, что делать с комментариями — нужен ли 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();"
Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

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

Комментарии 47

  • sikor26 февраля 2012 в 15:02 #

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

    Как-раз с подключением проблемы. Не могли бы Вы подоходчивей описывать весь процесс, или написать подробные инструкции в отдельных постах (для начинающих). Использую ваш сайт как учебник. Многое применил у себя на сайте, но со многим не могу разобраться. Как я понял, Ваши советы рассчитаны на "продвинутых", с определённым уровнем начальных знаний. Но многим Вы могли бы очень помочь более развёрнутым описанием всех необходимых действий. Зарание спасибо за ответ.

    • Миша27 февраля 2012 в 05:02 #

      в подключении скриптов нет ничего сложного)

      <script src="ссылка_на_скрипт"></script>

      Сам скрипт - это .js-файл, например myscript.js, в него просто нужно вписать функции, описанные выше)

    • Миша27 февраля 2012 в 05:02 #

      Как я понял, Ваши советы рассчитаны на “продвинутых”

      да, но я всегда отвечаю на вопросы, оставленные в комментариях))

  • sikor28 февраля 2012 в 12:02 #

    Спасибо за ответ. Что-то я явно делаю не так. Скопировал HTML код, вставил в шаблон, форма комментариев появилась. Создал commentform.js как Вы написали и положил его в папку с файлами темы. Строку

    <script src="http://ляляля.ru/wp-content/themes/моя тема/commentform.js"></script>

    вставил перед HTML кодом. Не работает. Укажите, пожалуйста, на ошибки. Извините за назойливость. Ещё раз спасибо.

  • Миша29 февраля 2012 в 07:02 #

    просто вставил весь код в произвольный HTML-файл

    <script>
    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;
    }
    }
     
    function checkall(){
    if(validateEmail() && validateName()) return true;
    else return false;
    }
     
    </script>
     
     
     
     
    <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>
    • Миша29 февраля 2012 в 07:02 #

      работает)
      так что я не знаю в чем ошибка, хотелось бы посмотреть на сайт, чтобы определить её

  • sikor29 февраля 2012 в 09:02 #

    muzarchiv.ru

    • Миша1 марта 2012 в 08:03 #

      во-первых ошибка в HTML, ты не добавил события к элементам:

      onSubmit="return checkall()"
      onBlur="validateName()"
      onBlur="validateEmail()"
    • Миша1 марта 2012 в 08:03 #

      + в каком файле подключаются скрипты? что-то не нашёл)

  • Peter W., Wellesley, MA29 февраля 2012 в 14:02 #

    Спасибо!

  • sikor2 марта 2012 в 05:03 #

    "Методом тыка" удалось добиться проверки имени и email в родной форме шаблона. Может подскажете как сделать проверку комментария.

    • Миша2 марта 2012 в 08:03 #

      точно также как и имени, только надо будет заменить название функции и ID элементов.

  • sikor2 марта 2012 в 05:03 #

    И еще, как сделать проверку синтаксиса.

  • sikor2 марта 2012 в 10:03 #

    Проверку синтаксиса набираемого текста в форме комментариев.

  • sikor2 марта 2012 в 10:03 #

    Чтобы слова написанные с ошибками подчеркивались.

  • sikor2 марта 2012 в 14:03 #

    Проверка комментария никак не получается. Посмотрите пожалуйста, что не так. Может в самом скрипте у меня ошибка?

    • Миша2 марта 2012 в 15:03 #

      как называется файл, в котором подключается скрипт? а то на твоем сайте скриптов немерено, лень искать))

  • sikor2 марта 2012 в 22:03 #

    commentform.js

  • Миша3 марта 2012 в 18:03 #

    да, всё правильно, ведь функция проверки скопирована с кода моего сайта))
    но HTML не стоило копировать - там есть фишка защиты от автоспама, поэтому у тебя и не работает.
    сейчас возможно и комментарии то не будут отправляться))
    короче, видишь в коде два тега <textarea> подряд?

  • Миша3 марта 2012 в 18:03 #

    так вот, их нужно будет заменить на:

    <textarea name="comment" id="comment" onblur="validateComment()"></textarea>

    примерно так)

  • sikor3 марта 2012 в 21:03 #

    Все заменил, но второй тег не понятно откуда вылазит когда смотрю код страницы в браузере. Откуда?

  • sikor3 марта 2012 в 21:03 #

    Заменил на

    <textarea name="comment" id="comment" onblur="validateComment()"></textarea>

    , а на выходе

    <textarea name="75755-comment" id="comment" onblur="validateComment()"></textarea><textarea name="comment" style="display:none" rows="1" cols="1"></textarea>
  • sikor3 марта 2012 в 21:03 #

    И почему name="75755-comment", а не name="comment"?

  • sikor3 марта 2012 в 22:03 #

    Понял в чем дело. Отключил плагин Antispam Bee. Все заработало. Может поделитесь секретом защиты от автоспама. Antispam Bee я использовал как раз для этого. Спасибо за терпение.

  • Ольга25 сентября 2012 в 02:09 #

    Покопалась, покопалась.... Всё получилось!!! Нужна внимательность, особенно новичкам, типа меня. Спасибо! Было бы здорово всё-таки использовать ajax, чтобы комментарии уходили без перезагрузки. А то плагины ни один не подходит, а то, что находила в Интернете так сложно или не объяснено по шагам или не для Вордпресса. Было бы здорово, если бы у Вас появилось что-нибудь подобное.

    • Миша25 сентября 2012 в 08:09 #

      появится)) я ещё в начале года написал такие комменты для своего сайта, там только код надо привести в порядок и можно будет запостить в блог)
      возможно даже в виде плагина сделаю, посмотрим

      • Ольга25 сентября 2012 в 11:09 #

        Поскорее бы!!! А то потом забуду где и что меняла... Ну да ладно. Подожду. Буду почаще заглядывать, а чтобы ничего нового не пропустить - подписалась!

      • Миша27 сентября 2012 в 07:09 #

        окей) ну обновления где-то в начале октября начнутся, сейчас мне нужно закончить несколько срочных клиентских проектов)

  • Ольга6 октября 2012 в 23:10 #

    Каждый день заглядываю, жду обновлений... Ну или хотя бы приблизительную дату их появления...

    • Миша8 октября 2012 в 13:10 #

      думаю что уже вот-вот) новый дизайн практически готов, на старом чтот неохота ничего писать) во второй половине месяца сейчас планирую

      • Ольга15 октября 2012 в 00:10 #

        Миша, хотела ещё Вас сразу спросить. А как можно сделать, чтобы при нажатии на "Ответить" или как у Вас на "ОТВЕТ", форма комментариев "вылезала" прямо под комментарием, а не как у меня с перезагрузкой страницы в самом конце как обычная форма? А то иногда даже я путаюсь, когда кому-то отвечаю. Приходится смотреть внимательно, чтобы знать кому сейчас отвечаешь. Спасибо

      • Миша15 октября 2012 в 07:10 #

        да, конечно, нужно для начала подключить стандартный вордпрессовский comment-reply.js, он находится где-то в wp-includes

  • Ольга16 октября 2012 в 00:10 #

    Урррррааа!!!! Заработало...!!!! Спасибо большое! Действительно быстрее стало. Нашла способ как подключить этот файл .js - на одном сайте объясняли. Теперь наберусь терпения, чтобы ещё и комментарии сделать ajax. Жду!!!!

  • Николай6 ноября 2012 в 21:11 #

    Спасибо)

  • Ольга27 декабря 2012 в 11:12 #

    Миша привет! Снова я... А вопрос такой: почему данный способ валидации не виден в Opere? Я посмотрела и на основном сайте и на поддомене - Opera не распознает этот скрипт? Я понимаю - это проблема браузера. Но можно ли её как то поправить, чтобы это отображалось у всех, кто им пользуется?
    Спасибо.

  • Ольга28 декабря 2012 в 13:12 #

    Видимо да... Или может скрипты долго грузились. Почему то у меня Опера медленная какая то...

  • Мурад23 марта 2013 в 18:03 #

    Привет! Подскажи, как быть если пользователь в поле имя пропишет три пробела?

  • Мурад24 марта 2013 в 16:03 #

    Спасибо! всё получилось)

  • Tutanhamon29 января 2015 в 02:01 #

    Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам.

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

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Метод тыка хорош, но оснвоы нужно знать в любом случае. Рекомендую почитать это.

  • Миша: Добрый вечер! Если я правильно понял, то: if( $opisanie ) echo '' . $opisanie . '' ;

  • alex morozov: Добрый вечер! у меня возникла следующая проблема. Я делаю фотоальбомы, чтобы они выглядели "как в контакте". Так вот, та...

  • Vladislav: Если эту муть убрать, то исчезает меню, и появляется описание под миниатюрами, которого не должно быть, как вы видите, я...

  • Миша: Либо размеры изображений вам помогут, либо CSS. И строку 14 гляньте, там муть какая-то.