При одном клике форма отправляется несколько раз?

Question

[Валентин Попов]

Использую для валидации формы плагин jqueryvalidation и не могу понять как подружить его с ajax. Получается когда заполняю форму и затем кликаю на кнопку, то всплывает модальное окно и происходит отправка формы по два - три раза, хотя нажал один раз.
Есть вот такая форма:

<form id="form-order" class="form-ordering__form" action="server.php" method="POST">
								<div class="form-ordering__flexcont">
									<div class="form-ordering__inputs">

										<div class="form-ordering__row">
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="name">Имя:</span>
												<input id="input-name" class="form-ordering__input" name="name" type="text" required>
											</label>
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="phone">Телефон:</span>
												<input id="input-phone" class="form-ordering__input" name="phone" type="tel" required>
											</label>
										</div>

										<div class="form-ordering__row">
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="street">Улица:</span>
												<input id="inpun-street" class="form-ordering__input" name="street" type="text" required>
											</label>
										</div>

										<div class="form-ordering__row">
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="home">Дом:</span>
												<input class="form-ordering__input" name="home" type="text">
											</label>
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="shape">Корпус:</span>
												<input class="form-ordering__input" name="shape" type="text">
											</label>
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="flat">Квартира:</span>
												<input class="form-ordering__input" name="flat" type="text">
											</label>
											<label class="form-ordering__point">
												<span class="form-ordering__title" for="floor">Этаж:</span>
												<input class="form-ordering__input" name="floor" type="text">
											</label>
										</div>

									</div><!--/.form-ordering__inputs-->

									<div class="form-ordering__inputs">

										<div class="form-ordering__row">
											<label class="form-ordering__message">
												<span class="form-ordering__title" for="comment">Комментарий:</span>
												<textarea class="form-ordering__text" name="comment" cols="30" rows="10"></textarea>
											</label>
										</div>

										<div class="form-ordering__row">
											<div class="form-ordering__radios-point">
												<div class="form-ordering__radio">
													<input class="form-ordering__radio-check" type="radio" id="radio-1" name="radio" value="наличными">
													<label class="form-ordering__radio-name" for="radio-1">Потребуется сдача</label>
												</div>
												<div class="form-ordering__radio">
													<input class="form-ordering__radio-check" type="radio" id="radio-2" name="radio" value="картой">
													<label class="form-ordering__radio-name" for="radio-2">Оплата по карте</label>
												</div>
											</div>
										</div>

										<div class="form-ordering__row">
											<div class="form-ordering__radios-point">
												<div class="form-ordering__radio">
													<input class="form-ordering__radio-checkbox" type="checkbox" id="radio-3" name="checkbox">
													<label class="form-ordering__radio-name" for="radio-3">Не перезванивать</label>
												</div>
											</div>
										</div>

										<div class="form-ordering__row">
											<div class="form-ordering__button">
												<button id="submit" class="button" type="submit">Заказать</button>
												<button class="button button_reset" type="reset">Очистить</button>
											</div>
										</div>

									</div><!--/.form-ordering__inputs-->
								</div><!--/.form-ordering__flex-cont-->
								<div class="message js-message"></div>
							</form>

вот к ней javascript код:

$(function(){
    $('#form-order').validate({
        rules: {
            name: {
                required: true
            },
            phone: {
                required: true,
                digits: true
            },
            street: {
                required: true
            },
            home: {
                required: true,
                digits: true
            },
            shape: {
                digits: true
            },
            flat: {
                required: true,
                digits: true
            },
            floor: {
                digits: true
            }
        },
        focusCleanup: true,
		focusInvalid: false,
		submitHandler: function () {
			$('#form-order').submit(function (e) {
				e.preventDefault();
				
				var form = $(this);
				if (form.valid()) {
					$('#submit').attr('disabled')
					$.ajax({
						type: "POST",
						url: "server.php",
						data: form.serialize()
					}).done(function () {
						form.find('#submit').attr('disabled', 'disabled');
						$.fancybox.open({
							src: '#form-modal',
							type: 'inline',
							afterClose: function () {
								form.trigger("reset");
							}
						});
					});
				}
				return false;
			});
		}, 
        invalidHandler: function(event, validator){
            $('.js-message').text('Пожалуйста заполните необходимые поля')
        },
        onkeyup: function(element) {
			$('.js-message').text('')
			
        },
        errorPlacement: function(error, element) {
            return true
        }
    });
});

Comments

[alex-1917]

да это обычный дребезг контактов, забейте.

)))

Answer 1

[Антон Спирин]

замените

function () {
      $('#form-order').submit(...);
      ...
}

на

function (form) {
      form.submit(...);
      ...
}

А вообще весь код можно переписать гораздо проще. Вы в начале модуля можете всем элементы сохранить в переменных, а не писать по несколько раз. Да и в submitHandler не обязательно submit вызывать, так как вы все равно preventDefault вызываете. У submitHandler есть второй аргумент event, может быть полезен.

Comments

[Валентин Попов]

Попробовал ваш способ, но вообще не показывает модального окна теперь, просто белая сртаниуа после клика.

$(function(){
    $('#form-order').validate({
        rules: {
            name: {
                required: true
            },
            phone: {
                required: true,
                digits: true
            },
            street: {
                required: true
            },
            home: {
                required: true,
                digits: true
            },
            shape: {
                digits: true
            },
            flat: {
                required: true,
                digits: true
            },
            floor: {
                digits: true
            }
        },
        focusCleanup: true,
		focusInvalid: false,
		submitHandler: function (form) {
			form.submit();
			var form = $(this);
			if (form.valid()) {
				$('#submit').attr('disabled')
				$.ajax({
					type: "POST",
					url: "server.php",
					data: form.serialize()
				}).done(function () {
					$.fancybox.open({
						src: '#form-modal',
						type: 'inline',
						afterClose: function () {
							form.trigger("reset");
						}
					});
				});
			}
			return false;

[Антон Спирин]

Вы все неправильно поняли =)
У меня там троеточия, чтобы не писать ваш код.

submitHandler: function (_form) {
     _form.submit(function (e) {
        e.preventDefault();
        
        var form = $(this);
        if (form.valid()) {
          $('#submit').attr('disabled')
          $.ajax({
            type: "POST",
            url: "server.php",
            data: form.serialize()
          }).done(function () {
            form.find('#submit').attr('disabled', 'disabled');
            $.fancybox.open({
              src: '#form-modal',
              type: 'inline',
              afterClose: function () {
                form.trigger("reset");
              }
            });
          });
        }
        return false;
      }

Тут можно все переписать без вызова submit. Так как это лишний код, который ничего не делает.
Можно просто оставить его содержимое. Так же сомневаюсь в необходимости вызова valid

[Валентин Попов]

rockon404, не работает, просто белый лист после отправки, ни модального окна ничего

[Антон Спирин]

уберите условие if (form.valid()) оно видимо undefined возвращает.
Да и не нужно оно тут, так как хандлер срабатывает только на валидной форме

[Антон Спирин]

этого должно быть достаточно:

submitHandler: function () {
         var form = $('#form-order');
         $('#submit').attr('disabled')
          $.ajax({
            type: "POST",
            url: "server.php",
            data: form.serialize()
          }).done(function () {
            form.find('#submit').attr('disabled', 'disabled');
            $.fancybox.open({
              src: '#form-modal',
              type: 'inline',
              afterClose: function () {
                form.trigger("reset");
              }
            });
          });

[Валентин Попов]

rockon404, Cпасибо огромное Вам!!!!!!

Answer 2

[Виктор Янышев]

Скорей всего на каждую проверку sumbitHandler