В моем предыдущем посте говорилось о том, насколько важна для меня проверка формы. Итак, вот статья, в которой рассказывается о одном способе проверки моих собственных форм. Вот демо. Излишне говорить, что есть так много способов сделать это, и, честно говоря, способов лучше, чем этот, но я воспользуюсь этой возможностью, чтобы заархивировать здесь, как контактная форма проверяется на моем личном веб-сайте.
Сама форма (HTML)
Вот простая контактная форма, в которой запрашивается ваше имя, адрес электронной почты и сообщение. Цель состоит в том, чтобы убедиться, что 1) все поля ввода заполнены и 2) введенный адрес электронной почты является действительным адресом электронной почты.
Для того, чтобы мой код был коротким для этого поста, я удалил <h1>text, div-оболочки и <label>, которые присутствовали в моей демонстрации. Самый необходимый минимум формы указан ниже.
Клиентский скрипт (JavaScript)
При отправке формы я использую jQuery для запуска функции, которая выполняет следующие действия: 1) Предотвращает поведение формы по умолчанию. 2) Сохраните все значения полей ввода в переменных. 3) Используя Ajax-метод load (), передайте эти переменные в сценарий PHP с именем form-send.php (на сервере). Важно отметить, что здесь происходит на самом деле. Метод load () загружает данные с сервера. Эти данные состоят из возвращенных данных и печатаются в выбранном элементе <div class="form-result"></div>. Простите меня за отсутствие лучшего объяснения ...
Серверный скрипт (PHP)
Я использую PHP, чтобы проверить, установлен ли метод публикации (isset($_POST["submit"]), что всегда должно приводить к значению true и следующему утверждению, потому что я явно дал кнопке значение в HTML. <button type=”submit” value=”submit” class=”form-submit”>Submit</button>
Затем PHP берет данные из объекта, переданного в методе load (), и помещает их в переменные. Следующие ниже операторы if / else проверяют, есть ли во всех трех полях ввода значения и действителен ли адрес электронной почты. Для этого используются встроенные методы PHP, такие как empty() и filter_var(). Если условия не выполняются, сервер вернет строку HTML-элемента с именем класса result-error. Эти возвращенные данные затем отображаются на странице внутри выбранного элемента <div class="form-result"></div>.
Если значения существуют и адрес электронной почты подтвержден, я обычно хочу, чтобы содержимое формы отправлялось на мой личный адрес электронной почты, но в этом примере я просто возвращаю сообщение об успешном выполнении с именем класса results-success. Если вы хотите, чтобы ваш сервер отправлял вам электронное письмо с помощью mail (), код приведен ниже. Я включаю его прямо перед тем, как повторить сообщение об успехе.
$recipient = "[email protected]"; // Your email address here $subject = "Contact Form Inquiry"; $headers = "From " . $email; $text = "Email from: " . $name . "\n\n" . "Email Address: " . $email . "\n\n" . "Message: " . $message; mail($recipient, $subject, $text, $headers);
Последняя вещь. Внутри моего PHP-скрипта у меня есть код JavaScript, который обрабатывает добавление и удаление стилей проверки формы.
Актуальные стили
И последнее. Я не включил все стили, которые я использовал для своей формы примера, но вот три, которые используются в моих скриптах, которые визуально важны для функциональности форм.
.input-error { border: 1px solid red; }
.result-error { color: red; }
.result-success { color: blue; }
И последнее, последнее. Определенно есть другие, более эффективные и безопасные способы сделать это. Но вот один способ, который успешно и безопасно сработал для моих масштабных проектов. В заключение, я также экспериментировал с проверкой формы интерфейса с использованием псевдоклассов CSS на CodePen, и я планирую написать об этом в ближайшее время!
