Проблемы с контактной формой (проверка красной границы)

Я два дня искал в Интернете какой-то шаблон PHP (потому что я не знаю, как кодировать на PHP), который мог бы выделить красные границы, если пользователь не ввел всю необходимую информацию. Мне удается заставить контактную форму работать, но не так, как я хочу. По сути, мне нужно, чтобы пользователь ввел правильную информацию; в противном случае появляется красная рамка.

Текущая ситуация: [Основная контактная форма: без проверки]

Желаемая ситуация: [Подтверждение контактной формы] *

  1. Имя (обязательно) (в случае ошибки: красная рамка)
  2. Электронная почта (обязательно: по крайней мере, включая знак @) (в случае ошибки: красная рамка)
  3. Тема (обязательно) (в случае ошибки: красная рамка)
  4. Сообщение (обязательно) (в случае ошибки: красная рамка)

*

Мой сайт: www.haildark.com, если вы хотите увидеть его во всех подробностях. Пожалуйста, помоги, если можешь. Думаю, мой мозг снова вот-вот взорвется. Спасибо. Это не обязательно должно быть в PHP. Пока код выполняет свою работу, меня все устраивает.

HTML:

<!-- Contact -->
<div class="wrapper wrapper-style5">
  <article id="contact" class="container small">
    <header>
      <h2>
        Contact Us
      </h2>
      <span>
        If you have any questions, comments, or concerns, please contact below and we will respond as soon as we can.
        Please allow us at least 72 hours to respond. Thanks for supporting us.
      </span>
    </header>
    <div>
      <div class="row">
        <div class="12u">
          <form method="post" action="contact.php">
            <div>
              <div class="row half">
                <div class="6u">
                  <input type="text" name="name" id="name" placeholder="Name" />
                </div>
                <div class="6u">
                  <input type="text" name="email" id="email" placeholder="Email" />
                </div>
              </div>
              <div class="row half">
                <div class="12u">
                  <input type="text" name="subject" id="subject" placeholder="Subject" />
                </div>
              </div>
              <div class="row half">
                <div class="12u">
                  <textarea name="message" id="message" placeholder="Message">
                  </textarea>
                </div>
              </div>
              <div class="row">
                <div class="12u">
                  <a href="#" class="button form-button-submit">
                    Send Message
                  </a>
                  <a href="#" class="button button-alt form-button-reset">
                    Clear Form
                  </a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>

Базовый PHP:

<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_subject = $_POST['subject'];
$field_message = $_POST['message'];

$mail_to = '[email protected]';
$subject = 'HailDark® User: '.$field_subject." - ".$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Subject: '.$field_subject."\n";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$field_email."\r\n";
$headers = 'Reply To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        alert('Thank you for the message. We will contact you shortly.');
        window.location = 'index.html';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        alert('Message failed. Please, send an email to [email protected]');
        window.location = 'index.html';
    </script>
<?php
}
?>

person umtek12    schedule 05.12.2013    source источник


Ответы (1)


Я видел, что вы используете HTML5, но не полностью. Ты использовал:

<input type="text" name="email" id="email" placeholder="Email" />

Ты можешь использовать

<input type="email" name="email" id="email" placeholder="Email" required="required"/>

Html5 предоставляет мощный способ управления вашим сайтом, как в строке выше, которую я использовал type="email", он автоматически проверяет адрес электронной почты, а также атрибут required="required" указывает вам, что это поле не должно быть пустым, оно будет выделено вами. Поэтому сначала используйте <!DOCTYPE html> перед тегом <html>, используйте теги html5 и используйте атрибут required="required" для каждого тега, в котором вы хотите проверить поле.

person Asraful Haque    schedule 05.12.2013