Задачка, которая решается в js?

Question

[ART4]

Добрый день, сам себе задачу поставил, но что то тупняк.
Имеется форма обратная связь, при нажатие Отправить, форма должна скрыться (obj.parentNode.style.display = "none";), но при этом должна пройти проверку, правильно ли ввели данные, если нет, то показывает ошибки. Если всё ОК, отправляет данные и показывает сообщение, мол Мы отправили ваше письмо.

Форму сделал всё как обычно, но если я в кнопку введу:

function hideme(obj) {
        obj.parentNode.style.display = "none";
    }

Потом в саму кнопку вставлю:
onclick="hideme(this)"
Понятно что скроется сразу и не ясно, что там и как. Как решать такое?

Comments

[Сергей Соколов]

проверка где происходит? – на клиенте или на сервере?

[ART4]

Сергей Соколов, на сервере

<?php

require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';

if (!Validator::isAjax() || !Validator::isPost()) {
	echo 'Доступ запрещен!';
	exit;
}

$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;

if (empty($name) || empty($email) || empty($phone) || empty($message)) {
	echo 'Все поля обязательны для заполнения.';
	exit;
}

if (!Validator::isValidEmail($email)) {
	echo 'E-mail не соответствует формату.';
	exit;
}

if (!Validator::isValidPhone($phone)) {
	echo 'Телефон не соответствует формату.';
	exit;
}

if (ContactMailer::send($name, $email, $phone, $message)) {
	echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
} else {
	echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
}
exit;

Answer 1

[Владимир Скибин]

У Вас должен быть такой алгоритм:

1. Валидируем данные, если что то не так - то прерываем цепочку и показываем ошибки на полях для ввода.
2. Отправляем запрос с данными из формы. Дожидаемся ответа. Если в ответе написано что все ок- то текущую форму скрываем, показываем окно со "спасибо". Если в ответе приходят ошибки - эту форм скрываем и показываем окно с "что то пошло не так, попробуйте позже". Если не дождались ответа или ответ "кривой" - то тоже скрываем екущую и показываем что что то не так.

Все валидации и отправки у Вас должны быть не на кнопке а на событие формы submit

Comments

[ART4]

У меня вот так

<form action="handler.php" id="contactForm" method="post">
                    <input class="field" id="name" name="name" placeholder="firstname" required type="text">
                    <br>
                    <input class="field" id="email" name="email" placeholder="lastname" required type="text">
                    <br>
                    <input class="field" id="phone" name="phone" placeholder="Phone" required type="text">
                    <br>
                    <textarea class="field" id="message" name="message" placeholder="Write your message here..."
                              type="text"></textarea>
                    <br><br>
                    <button id="button" name="btn_submit" type="submit" value="SEND">SEND</button>
                    <div class="result">
                        <span id="answer"></span>
                        <span id="loader"><img alt="" src="img/loader.gif"></span>
                    </div>
                </form>

и отправка на сервер

// Отправляет данные из формы на сервер и получает ответ
    $('#contactForm').on('submit', function(event) {
        
        event.preventDefault();

        var form = $('#contactForm'),
            button = $('#button'),
            answer = $('#answer'),
            loader = $('#loader');

        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: form.serialize(),
            beforeSend: function() {
                answer.empty();
                button.attr('disabled', true).css('margin-bottom', '20px');
                loader.fadeIn();
            },
            success: function(result) {
                loader.fadeOut(300, function() {
                    answer.text(result);
                });
                form.find('.field').val('');
                button.attr('disabled', false);
            },
            error: function() {
                loader.fadeOut(300, function() {
                    answer.text('Произошла ошибка! Попробуйте позже.');
                });
                button.attr('disabled', false);
            }
        });
    
    });

[Владимир Скибин]

ART4, И что в коде Вам не так?

Answer 2

[painmaker]

По нажатию на кнопку создаете событие. В нем проводите валидацию введенных данных. Далее обычная конструкция if/else. Если все ок - возвращаете сообщение, и через setTimeout скрываете форму. в блоке else, если не прошла выалидация, генерируете ошибку и выводите в форму, с подстветкой некорректных данных

Comments

[ART4]

У меня вот так

<form action="handler.php" id="contactForm" method="post">
                    <input class="field" id="name" name="name" placeholder="firstname" required type="text">
                    <br>
                    <input class="field" id="email" name="email" placeholder="lastname" required type="text">
                    <br>
                    <input class="field" id="phone" name="phone" placeholder="Phone" required type="text">
                    <br>
                    <textarea class="field" id="message" name="message" placeholder="Write your message here..."
                              type="text"></textarea>
                    <br><br>
                    <button id="button" name="btn_submit" type="submit" value="SEND">SEND</button>
                    <div class="result">
                        <span id="answer"></span>
                        <span id="loader"><img alt="" src="img/loader.gif"></span>
                    </div>
                </form>

и отправка на сервер

// Отправляет данные из формы на сервер и получает ответ
    $('#contactForm').on('submit', function(event) {
        
        event.preventDefault();

        var form = $('#contactForm'),
            button = $('#button'),
            answer = $('#answer'),
            loader = $('#loader');

        $.ajax({
            url: 'handler.php',
            type: 'POST',
            data: form.serialize(),
            beforeSend: function() {
                answer.empty();
                button.attr('disabled', true).css('margin-bottom', '20px');
                loader.fadeIn();
            },
            success: function(result) {
                loader.fadeOut(300, function() {
                    answer.text(result);
                });
                form.find('.field').val('');
                button.attr('disabled', false);
            },
            error: function() {
                loader.fadeOut(300, function() {
                    answer.text('Произошла ошибка! Попробуйте позже.');
                });
                button.attr('disabled', false);
            }
        });
    
    });