+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Проверка введенных данных на JavaScript, отправка заполненной формы на почту

В нашем примере у нас 5 полей, которые необходимо заполнить:

- имя
- сообщение
- e-mail
- контактный телефон
- контрольное число для защиты


Помимо простой проверки на пустоту поля, мы покажем

как проверить правильно ли введен e-mail и телефон



Проверять поля мы будем с помощью JavaScript. В последнее поле необходимо ввести определенное число (для защиты от автоматического заполнения). Если поля будут пустыми, появится alert-окно с уведомлением. К данному скрипту мы сразу прибавили отправку заполненной формы на почту, делать мы это будет с помощью php.

Итак, создаем файл index.php и пишем туда следующую форму:
<form action='index.php' method="post">
1. Ваше имя:<br>
<input type="text" name="fnm" value="">
<br>

2. Сообщение:<br>
<textarea name="text"></textarea>
<br>

3. E-Mail<br>
<input type="text" name="email" value="">
<br>

4. Контактный телефон<br>
<input type="text" name="phone" value="">
<br>

3. Введите сумму 10+10<br>
<input type="text" name="summa" id='summa' value=""><br>
<input type="hidden" name="hidden" value="ok">
<input type="submit" value="отправить" name="Submit" onClick="return Formdata(this.form)">
</form>
Создаем файл data.js, пишем в него код проверки:
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.fnm != null && data.fnm.value.length < 3 )
{
alert('Заполните поле "Ваше имя"');
return false;}

/* если не заполнено поле Сообщение */
if (data.text != null && data.text.value.length < 3)
{
alert('Заполните поле "Сообщение"');
return false;}

/* e-mail Юзера */
if(data.email != null && data.email.value.length == 0)
{
alert('поле "E-Mail" пустое');
return false;}

if(data.email != null && data.email.value.length < 6)
{
alert('слишком короткий "E-Mail"');
return false;}

if(!(/^w+[-_.]*w+@w+-?w+.[a-z]{2,4}$/.test(data.email.value)) )
{
alert("Введите правильный E-Mail адрес");
return false;}

/* контактный телефон */
if(data.phone != null && data.phone.value.length == 0)
{
alert('поле "Контактный телефон" пустое');
return false;}

if(data.phone != null && data.phone.value.length < 5)
{
alert('поле "Контактный телефон" должно содержать минимум пять символов');
return false;}

if(!(/^[0-9-+()s]+z/.test(data.phone.value+"z")))
{
alert('"Контактный телефон" указан неверно');
return false;}

/* делаем чтобы поле сумма было равно определенному числу */
number = document.getElementById("summa");
if (number.value !== '20')
{
alert('"Сумма" не введена или введена неверно');
return false;}
}
Подгружаем данный файл в наш документ, помещаем его между тегами head:
<!-- не ошибитесь с путем -->
<script type="text/javascript" src="data.js"></script>
Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
В файл index.php пишем php-код:
<?php
if(isset($_POST["hidden"])):
$dt=date("d F Y, H:i:s"); // дата и время
$mail="my@email.ru"; // e-mail куда уйдет письмо
$title="Форма проверки введенных данных"; // заголовок(тема) письма
//конвертируем
$title=iconv("utf-8","windows-1251",$title);
$title=convert_cyr_string($title, "w", "k");

$fnm=trim($_POST["fnm"]);
$fnm=strip_tags($fnm);
$fnm=htmlspecialchars($fnm); // обрабатываем
$uname=stripslashes($uname);

$text=trim($_POST["text"]);
$text=strip_tags($text);
$text=htmlspecialchars($text);
$text=str_replace("\r\n","<br>",$text);

$email=trim($_POST["email"]);
$email=strip_tags($email);
$email=htmlspecialchars($email);

$phone=trim($_POST["phone"]);
$phone=strip_tags($phone);
$phone=htmlspecialchars($phone);

$mess="<html><head></head><body><b>Имя:</b> $fnm<br>";
$mess.="<b>Сообщение:</b> $text<br>";
// ссылка на e-mail
$mess.="<b>E-Mail:</b> <a href='mailto:$email'>$email</a><br>";
$mess.="<b>Телефон:</b> $phone<br>";
$mess.="<b>Дата и Время:</b> $dt</body></html>";
//конвертируем
$mess=iconv("utf-8","windows-1251",$mess);
$mess=convert_cyr_string($mess, "w", "k");

$headers="MIME-Version: 1.0\r\n";
$headers.="Content-Type: text/html; charset=koi8-r\r\n";
$headers.="From: $email\r\n"; // кто отправил
mail($mail, $title, $mess, $headers); // отправляем

// выводим уведомление и перезагружаем страничку
print "
<script language='Javascript' type='text/javascript'>
<!--
alert ('Ваше сообщение отправлено! Спасибо!');
function reload()
{location = 'index.php'};
setTimeout('reload()', 0);
-->
</script>";
endif;
?>


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 34301