Простенькая валидация формы комментариев
06.09.2018
Во время создания этого блога, я долго думал, что делать с комментариями — нужен ли ajax, как лучше сделать проверку полей и прочее.
Первоначально я решил ограничиться простой JavaScript-валидацией, через некоторое время я начал использовать jQuery на блоге, теперь вот подумываю об AJAX-добавлении комментов.
Конечно, в WordPress уже существует валидация по умолчанию, но во-первых она на php , то есть если ты ошибся при заполнении формы, то придётся возвращаться на предыдущую страницу, во-вторых дизайн страницы с ошибками отличается от дизайна сайта и наконец в-третьих, я использую английский WordPress для того, чтобы сократить объём потребляемой им памяти, а в этом случае страница с ошибками будет на английском языке.
Простая обратная связь для сайта на PHP
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 > |
Дальше пойдёт код, надеюсь вы имеете представление о том, как подключать скрипты ????
Покупаем на Ali - iPhone 5S, 6, 6S и другие распаковки с Aliexpress головного мозга
Как это работает: если поле заполнено неправильно, то комментарий не отправится и выведется сообщение об ошибке в <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();" |