Laravel валидация формы с AJAX сообщением

[Apppxu]

Здравствуйте.
С Laravel столкнулся впервые и сразу много вопросов.
Суть в том что при отправке сообщения с формы он просто редиректит обратно на страницу.
А нужно хотяб какоето сообщение - "Ваше сообщение успешно отправлено" ну и минимальная валидация полей. сейчас и с пустими отправляет

    public function order_call(Request $request)
    {
        $rules = [
            'name' => 'required',
            'phone' => 'required'
        ];

        $messages = [
            'name.required' => 'Пожалуйста введите имя',
            'phone.required' => 'Пожалуйста введите телефон',
        ];
        $this->validate($request, $rules, $messages);

        $name = $request->name;
        $phone = $request->phone;
      
        Mail::send('emails.order_call', ['name' => $name, 'phone' => $phone], function ($m) use ($request) {

            $from = 'noreply@euromining.su';
            $name = 'Euro Mining';
            $to = 'info@euromining.su';
            $subject = $request->name .' заказал звонок';

            $m->from($from, $name);

          
            $m->to($to)->subject($subject);
        });
        return redirect()->back();

    }

<div class="firstForm">
                <form action="{{ route('order_call') }}" method="post">
                        {{ csrf_field() }}
                    <input type="text" placeholder="Ваше имя" name="name">
                    <input type="text" placeholder="Ваш телефон" name="phone">
                    <button id="send" type="submit">сделать заявку <span>→</span></button>
                </form>
            </div>

https://euromining.su

$('button#send').click(function() {
    if ($('input[name=agreement]').is(':checked')) {
        var str = $('#firstForm > form').serializeArray(); // Собираем все данные формы
        $.ajax({
            type: "POST",
            url: "/sendmail",
            data: str,
            success: function(msg) {
                if (msg) {
                    json = $.parseJSON(msg);
                    if (json.result) {
                        $('#tourForm').html('<div id="success-send-order">Успешно отправлено</div>');
                    } else if (json.errors) {
                        $('#firstForm form input').css('border', 'none');
                        $.each(json.errors, function(key) {
                            $('#firstForm form input[name="' + key + '"]')
                                .css('border', "1px solid red");
                        });
                    }
                } else {
                    alert('Ошибка ответа ajax');
                }
            }
        });
    } else {
        alert('Нужно принять условия оферты');
    }
    return false;
});

 

[Get-Web]

Вы получаете данные при помощи ajax поэтому вам не нужна кнопка отправки с типом type="submit" можно заменить её на другой тип например type="button" либо вообще на ссылку. Тогда форма не будет отправляться, а будет выполняться только ajax запрос. Если же использовать кнопку type="submit" тогда обработчик нужно вешать не на кнопку, а на форму и останавливать отправку в нужном месте.

 

[Sorcus]

Вы получаете данные при помощи ajax поэтому вам не нужна кнопка отправки с типом type="submit" можно заменить её на другой тип например type="button" либо вообще на ссылку. Тогда форма не будет отправляться, а будет выполняться только ajax запрос. Если же использовать кнопку type="submit" тогда обработчик нужно вешать не на кнопку, а на форму и останавливать отправку в нужном месте.

А

event.preventDefault()

для кого тогда?
Либо я чего-то не знаю, либо ты.

 

[Get-Web]

А

event.preventDefault()

для кого тогда?
Либо я чего-то не знаю, либо ты.

Все верно, вы чего-то не знаете. Отправку формы вы должны останавливать на форме (а именно событие send), а на кнопке вы всего лишь остановите события, которые висят на кнопке. Зачем останавливать событие если можно просто заменить тип кнопки?

 

[Sorcus]

Все верно, вы чего-то не знаете. Отправку формы вы должны останавливать на форме (а именно событие send), а на кнопке вы всего лишь остановите события, которые висят на кнопке. Зачем останавливать событие если можно просто заменить тип кнопки?

Похоже я не совсем въезжаю в то, что ты пытаешься сказать...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Send form</title>
    </head>
    <body>
        <form>
            <input id="name" type="text" placeholder="Name">
            <button id="send" type="submit">Send</button>
        </form>

        <script>
            "use strict"

            let button = document.getElementById("send")
            let input = document.getElementById("name")

            button.addEventListener("click", (event) => {
                event.preventDefault()
                console.log(input.value)
            })
        </script>
    </body>
</html>

Вешаем на кнопку событие, запрещаем стандартную обработку формы при клике на <button> и обрабатываем форму без всяких перезагрузок.
Разве нет? Естесственно это не единственный вариант, но если набросаешь код, то заценю наглядно, что ты имел в виду.

 

[Sorcus]

Зачем останавливать событие если можно просто заменить тип кнопки?

Не знаю. Может потому, что элемент кнопка используется как кнопка?

 

[Get-Web]

Похоже я не совсем въезжаю в то, что ты пытаешься сказать...

Если говорить конкретно по теме, то я пытаюсь сказать что не нужно никаких скриптов, чтобы не отправлять форму, достаточно не использовать submit

Вешаем на кнопку событие, запрещаем стандартную обработку формы при клике на <button> и обрабатываем форму без всяких перезагрузок.

Вы правильно говорите, но только вы останавливаете не обработку форму, а событие которые висят на кнопке по которой вы кликнули, а то что форма дальше не обрабатывается это просто побочное действие данной остановки. И в данном примере это вполне приемлемо я с этим полностью согласен, но в большинстве случаев необходимо не только остановить событие, но и обработать его. Поэтому когда вы работаете именно с формой и событием send, вы получаете все данные из формы, а так же вы можете использовать this и работать с несколькими формами. Когда разработчики привыкают работать только с кнопкой, а не с формой им приходиться потом часами додумываться почему в этом событии нет того, что им нужно... Я просто сказал как лучше обрабатывать именно формы и саму отправку.

Не знаю. Может потому, что элемент кнопка используется как кнопка?

Если вы про type="button" то он для этого и нужен, чтобы она сама по себе ничего не делала и её можно было использовать именно в связке со скриптами.