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

Question

[Евгений]

В общем есть форма

<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="[phone]" 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 в принципе такая же реакция. Как можно правильно сделать так чтобы аякс не отправлялся пока пока не заполнены?

Answer 1

[bm1]

reqired срабатывает при отправке формы, так что стоит вернуть type=submit, а обработку события submit вешать на саму форму и судя по всему вы не пробрасываете объект event в событие, должно быть

$('#form').on('submit', function (event) {
  event.preventDefault();
})

Comments

[Евгений]

Я пробовал так делать , сервер так присылает 500-тую ошибку. Пытаюсь разобраться почему. Аякс выглядел так.

$('#formsub').on('submit', 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('Ошибка отправки заявки');
                }
            }
        );
    });

[bm1]

Евгений, а
var category = $(this).data('id');
у вас на форме есть data-id или он так и остался на кнопке?

[Евгений]

bm1, Тьфу точно. Забыл его перенести. Спасибо - вопрос закрыт

[bm1]

Евгений, Пожалуйста

Answer 2

[Антон]

По нормальному если - валидация будет происходить, если использовать тип JSON, непосредственно на сервере.
Получаем массив POST, перебираем foreach'ем, проверяем строки на заполненность и т.п. или возвращаем die(json_encode()) с ошибками, с названием поля и с текстом ошибки.

Answer 3

[tyzberd]

если сделать так форма не должна отправится с required

$('form').on('submit', function (e) {
        // prevent default action and bubbling
        e.preventDefault();
       
    });