Форма обратной связи, проверка на правильность заполнения полей

@novicho_k · Регистрация: 28.11.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер! Подскажите, как с помощью js сделать проверку на правильность заполнения полей . Если поле не заполнено - выделять его красным. Если правильно заполнено и письмо отправлено, выводить сообщение об успешной отправке. Помогите слепить из js-кода что-то путнее.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="col-lg-6 COL-12">
                <div class="form-wrapper">
                    <div class='form-title'>Обратная связь</div>
                    <div role="form" class="wpcf7" id="" lang="uk" dir="">
                        <div class="screen-reader-response"></div>
                            <form id="form" method="post" class="" novalidate="novalidate">
                                <div class="form-inputs">
                                    <p><span class=" your-name">
                                    <input type="text" name="your-name" value="" size="40" class="" aria-required="true" aria-invalid="false" placeholder="Имя *" /></span></p>
                                    <p><span class="your-email">
                                    <input type="email" name="your-email" value="" size="40" class="" aria-required="true" aria-invalid="false" placeholder="Email*" /></span></p>
                                    <p><span class="your-tel">
                                    <input type="tel" name="your-tel" value="" size="40" class="" aria-required="true" aria-invalid="false" placeholder="Контактный телефон *" /></span></p>
                                </div>
                                <div class="form-textarea *"> 
                                    <span class="your-message">
                                    <textarea name="your-message" cols="40" rows="10" class="" aria-invalid="false" placeholder="Сообщение">
                                    </textarea></span>
                                </div>
                                <p><input type="submit" value="Отправить" class="" /></p>
                            </form>
                    </div>
                </div>
            </div>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
 
$recepient = "";
$sitename = "";
 
$theme = "Заявка с сайта";
$name = trim($_POST["your-name"]);
$email = trim($_POST["your-email"]);
$phone = trim($_POST["your-tel"]);
$text = trim($_POST["your-message"]);
$message = "Тема: $theme \nИмя: $name \nEmail: $email \nТелефон: $phone \nТекст: $text";
 
$pagetitle = "Новая заявка с сайта ...";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
    var you_name;
    if (you_name == 0)
        you_name = $("input[name='your-name']").val();
        $("input[name='your-name']").css('border', '1px solid red');
        $("input[name='your-name']").on("input", function(event){
        $("input[name='your-name']").css('border', '1px solid red');
    });
 
    $("#form").submit(function() {
        $.ajax({
            type: "POST",
            url: "mail.php",
            data: $(this).serialize()
        }).done(function() {
            $(this).find("input").val("");
                $(".wpcf7").append('<p class="success">Спасибо за Ваше сообщение! Оно успешно отправлено.</p>');
                $("#form").trigger("reset");
            });
            return false;
        });
    
 
});

@Mr_Sergo · 17.07.2019, 19:16

novicho_k,

http://some-test.onlinewebshop.net/ajax-again/

index.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
 
<div class="col-lg-6 COL-12">
    <div class="form-wrapper">
        <div class='form-title'>Обратная связь</div>
        <div role="form" class="wpcf7" id="" lang="uk" dir="">
            <div class="screen-reader-response"></div>
            <form id="form" novalidate="novalidate">
                <div class="form-inputs">
                    <p><span class=" your-name">
                    <input type="text" name="your-name" value="" size="40" class="validate" aria-required="true" aria-invalid="false" placeholder="Имя *" /></span></p>
                    <p><span class="your-email">
                    <input type="email" name="your-email" value="" size="40" class="validate" aria-required="true" aria-invalid="false" placeholder="Email*" /></span></p>
                    <p><span class="your-tel">
                    <input type="tel" name="your-tel" value="" size="40" class="validate" aria-required="true" aria-invalid="false" placeholder="Контактный телефон *" /></span></p>
                </div>
                <div class="form-textarea *"> 
                    <span class="your-message">
                        <textarea name="your-message" cols="40" rows="10" class="validate" aria-invalid="false" placeholder="Сообщение"></textarea>
                    </span>
                </div>
                <p><input type="submit" value="Отправить" class="" /></p>
            </form>
            <div class="status"></div>
        </div>
    </div>
</div>
 
<script src="script.js"></script>
</body>
</html>

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$('#form').submit(function(e) {
    e.preventDefault();
    var err = 0;
    $('.validate').each(function(){
        if(!$(this).val()){
            $(this).addClass('error');
            err++;
        }
        else $(this).removeClass('error');
    });
    if(!err) send_form($(this),'mail.php');
    else $('.status').html('');
});
 
function send_form(obj,url) {
    $.ajax({
        type: 'POST',
        url: url,
        data: $(obj).serialize(),
        success: function(data) {
            $('.status').html('<div class="success">Спасибо за Ваше сообщение! Оно успешно отправлено.</div>' + data);
        },
        error: function(xhr){
            console.error(xhr.statusText);
        }
    });
}

styles.css

CSS
1
2
3
4
5
6
7
8
9
.error{
    background: rgba(255, 0, 0, 0.1);
}
 
.success{
    width: fit-content;
    background: rgba(0, 255, 10, 0.4);
    padding: 10px;
}

mail.php

PHP
1
echo '<br><br><br>Данные пришедшие на сервер: <pre>', print_r($_POST), '</pre>';

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

Форма обратной связи, проверка на правильность заполнения полей

Решение