@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

Как валидировать AJAX отправку?

В общем есть форма
<form role="form">

                        <div class="form-group">
                            <label for="fio" class="text-center">Ф.И.О:</label>
                            <input type="text" class="form-control" id="fio" placeholder="Иванов Иван Иванович" required>
                        </div>

                        <div class="form-group">
                            <label for="tel" class="text-center">Телефон:</label>
                            <input type="text" class="form-control" id="tel" placeholder="+375291234567" required>
                        </div>
                        <div class="form-group">
                            <label for="tel" class="text-center">Выберите услугу:</label>

                            <select class="selectpicker form-control" id="price">
                            <?php foreach ($gyn as $item) :?>
                            <option value="<?=$item['id']?>"><?=$item['name']?></option>
                            <?php endforeach; ?>
                        </select>
                        </div>

                        <div class="form-group text-center">
                        <button type="button" class="btn btn-style-one" id="btn" data-id="1">Отправить</button>
                        </div>
                    </form>


Есть аякс, повесил его на клик

$('#btn').on('click', function ()
    {
        event.preventDefault();
        var name = $("#fio").val();
        var number = $("#tel").val();
       	var price = $("#price option:selected").text();
        var pricenum = $("#price").val();
        var category = $(this).data('id');

        $.ajax(
        	{
                /*url:'index.php?r=category/gynecology',*/
                url:window.location,
                data: {a:[name,number, price, category , pricenum ]},
                type: 'POST',
                success: function (res) {
                	alert('Ваш заказ принят, мы свяжемся с Вами для подтверждения заказа. Сейчас проийзодёт переадресация');

                    setTimeout( 'location="index.php?r=site/index";', 5);
                    console.log(res);
                },
                error: function () {
                    alert('321');
                }
            }
        );
    });


В чём суть. required толком не работает и форма отправляет даже если пустые поля.

Пробовал менять тип кнопки на sumbit и вешать на event submit в принципе такая же реакция. Как можно правильно сделать так чтобы аякс не отправлялся пока пока не заполнены?
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
@bm1
reqired срабатывает при отправке формы, так что стоит вернуть type=submit, а обработку события submit вешать на саму форму и судя по всему вы не пробрасываете объект event в событие, должно быть
$('#form').on('submit', function (event) {
  event.preventDefault();
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Eridani
@Eridani
Мимо проходил
По нормальному если - валидация будет происходить, если использовать тип JSON, непосредственно на сервере.
Получаем массив POST, перебираем foreach'ем, проверяем строки на заполненность и т.п. или возвращаем die(json_encode()) с ошибками, с названием поля и с текстом ошибки.
Ответ написан
Комментировать
@tyzberd
если сделать так форма не должна отправится с required
$('form').on('submit', function (e) {
        // prevent default action and bubbling
        e.preventDefault();
       
    });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы