Почему незаполненная форма обратной связи отправляется?

Question

[FIKSER]

Почему можно отправить незаполненную форуму при использовании атрибута "required"?
Или в JS нужно добавить ограничение?
JS

spoiler

$(document).ready(function() {

    $("#ma1, #ma2,#ma3, #ma4").submit(function() {
        $.ajax({
            type: "POST",
            url: "form-handler.php",
            data: $(this).serialize()
        }).done(function() {
            $(this).find("input").val("");
            alert("Спасибо за заявку! Скоро мы с вами свяжемся.");
            $("#ma1, #ma2,#ma3, #ma4").trigger("reset");
        });
        return false;
    });
    
});

HTML

spoiler

<form action="form-handler.php" method="POST" name="forma1" id="ma1">
                                <input type="text" name="name"  required placeholder="Ваше имя"/>
                                <input type="text" name="mail" required placeholder="Ваш email"/>
                                <input type="text" name="comment" required placeholder="Сообщение"/>
                                <input type="submit" onclick="yaCounter"; required return true;" value="Отправить"/>

PHP

spoiler

<?php
$name = htmlspecialchars($_POST['name'] );
$mail = htmlspecialchars($_POST['mail'] );
$comment = htmlspecialchars($_POST['comment']);

$text = <<<EMAILTEXT
С сайта была получена заявка с такими данными: 
Имя: {$name}
Почта: {$mail}
Сообщение: {$comment}
EMAILTEXT;
$result = mail("[e-mail]","Новая заявка",$text);
if ($result) {
echo "<p> —Cообщение отправленно успешно!</p>";
}
 else {
	 echo "<p> —Cообщение не отправленно !</p>"; 
 } 
?>

Comments

[Дмитрий]

Добрый вечер.
Где код?

[FIKSER]

slo_nik, добрый. Обновил!

[Дмитрий]

FIKSER, почему Вы решили, что форма не рабочая?

[FIKSER]

slo_nik, она рабочая, но если ее не заполнять, то все равно она отправляется.

[Дмитрий]

FIKSER, ничего не отправляется. Скопировал код и запустил у себя на локалке.

Answer 1

[Exploding]

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

P.S. И как мне с телефона код хайлайтить без переключения на полную версию страницы??

Comments

[FIKSER]

Где именно ошибки?

[Exploding]

Уфф... #ma1.... Для них не установлен .on("reset" Поэтому и триггер нельзя юзать.
yaCounter"; required return true;" val
Вот.
Зачем онклик на сабмите и ретурн? Вы ж слушатель повесили на сабмит событие

[Exploding]

Просто метод ресет вызывайте для форм

[FIKSER]

Exploding, я с сабмита убрал, просто тут забыл тоже убрать. Его я случайно добавил.

#ma1.... Для них не установлен .on("reset" Поэтому и триггер нельзя юзать.

А как установить?

[Exploding]

FIKSER, Не надо! Я ж говорю, метод....
Короче вот:
$("#ma1, #ma2,#ma3, #ma4")[0].reset();
Или каждую по отдельности если кучей не сработает.

Answer 2

[artyomunder]

Смотрим совместимость с вашей версией браузера.
Да и зачем куча форма с id, если у всех поля одинаковые? Не проще классом обозвать и не плодить кучу id?