Во время создания этого блога, я долго думал, что делать с комментариями — нужен ли ajax, как лучше сделать проверку полей и прочее.
Первоначально я решил ограничиться простой JavaScript-валидацией, через некоторое время я начал использовать jQuery на блоге, теперь вот подумываю об AJAX-добавлении комментов.
Конечно, в WordPress уже существует валидация по умолчанию, но во-первых она на php, то есть если ты ошибся при заполнении формы, то придётся возвращаться на предыдущую страницу, во-вторых дизайн страницы с ошибками отличается от дизайна сайта и наконец в-третьих, я использую английский WordPress для того, чтобы сократить объём потребляемой им памяти, а в этом случае страница с ошибками будет на английском языке.
<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.
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();"
Как-раз с подключением проблемы. Не могли бы Вы подоходчивей описывать весь процесс, или написать подробные инструкции в отдельных постах (для начинающих). Использую ваш сайт как учебник. Многое применил у себя на сайте, но со многим не могу разобраться. Как я понял, Ваши советы рассчитаны на "продвинутых", с определённым уровнем начальных знаний. Но многим Вы могли бы очень помочь более развёрнутым описанием всех необходимых действий. Зарание спасибо за ответ.
в подключении скриптов нет ничего сложного)
Сам скрипт - это .js-файл, например myscript.js, в него просто нужно вписать функции, описанные выше)
да, но я всегда отвечаю на вопросы, оставленные в комментариях))
Спасибо за ответ. Что-то я явно делаю не так. Скопировал HTML код, вставил в шаблон, форма комментариев появилась. Создал commentform.js как Вы написали и положил его в папку с файлами темы. Строку
вставил перед HTML кодом. Не работает. Укажите, пожалуйста, на ошибки. Извините за назойливость. Ещё раз спасибо.
просто вставил весь код в произвольный HTML-файл
работает)
так что я не знаю в чем ошибка, хотелось бы посмотреть на сайт, чтобы определить её
muzarchiv.ru
во-первых ошибка в HTML, ты не добавил события к элементам:
+ в каком файле подключаются скрипты? что-то не нашёл)
Спасибо!
"Методом тыка" удалось добиться проверки имени и email в родной форме шаблона. Может подскажете как сделать проверку комментария.
точно также как и имени, только надо будет заменить название функции и ID элементов.
И еще, как сделать проверку синтаксиса.
поконкретнее, может?
Проверку синтаксиса набираемого текста в форме комментариев.
Чтобы слова написанные с ошибками подчеркивались.
1. в хроме и так подчеркиваются
2. =)
Проверка комментария никак не получается. Посмотрите пожалуйста, что не так. Может в самом скрипте у меня ошибка?
как называется файл, в котором подключается скрипт? а то на твоем сайте скриптов немерено, лень искать))
commentform.js
да, всё правильно, ведь функция проверки скопирована с кода моего сайта))
но HTML не стоило копировать - там есть фишка защиты от автоспама, поэтому у тебя и не работает.
сейчас возможно и комментарии то не будут отправляться))
короче, видишь в коде два тега <textarea> подряд?
так вот, их нужно будет заменить на:
примерно так)
Все заменил, но второй тег не понятно откуда вылазит когда смотрю код страницы в браузере. Откуда?
Заменил на
, а на выходе
И почему name="75755-comment", а не name="comment"?
Понял в чем дело. Отключил плагин Antispam Bee. Все заработало. Может поделитесь секретом защиты от автоспама. Antispam Bee я использовал как раз для этого. Спасибо за терпение.
я как раз хотел написать об этом пост)) сегодня-завтра опубликую)
Покопалась, покопалась.... Всё получилось!!! Нужна внимательность, особенно новичкам, типа меня. Спасибо! Было бы здорово всё-таки использовать ajax, чтобы комментарии уходили без перезагрузки. А то плагины ни один не подходит, а то, что находила в Интернете так сложно или не объяснено по шагам или не для Вордпресса. Было бы здорово, если бы у Вас появилось что-нибудь подобное.
появится)) я ещё в начале года написал такие комменты для своего сайта, там только код надо привести в порядок и можно будет запостить в блог)
возможно даже в виде плагина сделаю, посмотрим
Поскорее бы!!! А то потом забуду где и что меняла... Ну да ладно. Подожду. Буду почаще заглядывать, а чтобы ничего нового не пропустить - подписалась!
окей) ну обновления где-то в начале октября начнутся, сейчас мне нужно закончить несколько срочных клиентских проектов)
Каждый день заглядываю, жду обновлений... Ну или хотя бы приблизительную дату их появления...
думаю что уже вот-вот) новый дизайн практически готов, на старом чтот неохота ничего писать) во второй половине месяца сейчас планирую
Миша, хотела ещё Вас сразу спросить. А как можно сделать, чтобы при нажатии на "Ответить" или как у Вас на "ОТВЕТ", форма комментариев "вылезала" прямо под комментарием, а не как у меня с перезагрузкой страницы в самом конце как обычная форма? А то иногда даже я путаюсь, когда кому-то отвечаю. Приходится смотреть внимательно, чтобы знать кому сейчас отвечаешь. Спасибо
да, конечно, нужно для начала подключить стандартный вордпрессовский comment-reply.js, он находится где-то в wp-includes
Урррррааа!!!! Заработало...!!!! Спасибо большое! Действительно быстрее стало. Нашла способ как подключить этот файл .js - на одном сайте объясняли. Теперь наберусь терпения, чтобы ещё и комментарии сделать ajax. Жду!!!!
Спасибо)
Миша привет! Снова я... А вопрос такой: почему данный способ валидации не виден в Opere? Я посмотрела и на основном сайте и на поддомене - Opera не распознает этот скрипт? Я понимаю - это проблема браузера. Но можно ли её как то поправить, чтобы это отображалось у всех, кто им пользуется?
Спасибо.
Спасибо за то, что нашла ошибку, Оль!
Пост очень старый и нуждается в обновлении, займусь им на днях.
Слушай, а сейчас всё нормально...??? Ну дела-а....
то есть всё ок?
значит дело было в кэше)
Видимо да... Или может скрипты долго грузились. Почему то у меня Опера медленная какая то...
прошли времена, когда Opera была быстрым браузером)
Привет! Подскажи, как быть если пользователь в поле имя пропишет три пробела?
Привет!
перед проверкой удалять пробелы из строки)
Спасибо! всё получилось)
Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам.