Как запретить отправку формы, если цикл вернул false?

Question

[andreyqin]

Валидация формы регистрации:

$('.registration form').on('submit', function() {
    var $form = $(this);
    $form.find('input:not([type="submit"])').each(function() {
        if (this.value == '') {
            this.focus();
	    alert('Заполните все поля');
	    return false;
        }
    });
    $.post(
        '/includes/users.php',
	{'reg-email': $('#reg-email').val()}
    ).done(function(check) {
        if (check) {
	    $('.registration .clear').css('display', 'block');
	} else {
	    $form.off('submit').submit();
	}
    });
    return false;
});

Вопрос: как запретить последующие проверки, а вместе с этим и отправку формы, если цикл each вернул false?

Answer 1

[Александр Глущенко]

Я лично не совсем понял как у вас отрабатывает представленный пример. Есть два способа повесить хендлер на событие.
Первый, проприетарный :

jQuery('form').on('submit',function(e){
     e.preventDefault(); //Отменили нативное действие
     (e.cancelBubble) ? e.cancelBubble : e.stopPropagation; //Погасили всплытие
}

И второй, через алиас:

jQuery('form').submit(function(){
return false; //Отменили нативное действие
});

А у вас что-то среднее получилось.
Кроме того почему не сделать так:

jQuery('form').on('submit',function(e){
    var flag = true, 
        inputs = jQuery('input:not([type="submit"])',this); // Вторым аргументом указываем где искать
    inputs.each(function(){
        if(jQuery(this).val() == ''){
            flag = false;
        }
    });
    if(flag){
          /* Ajax запрос */
        alert('Запрос!');
     } else {
        alert('Заполни меня!!!');
     }
     e.preventDefault(); //Отменили нативное действие
     (e.cancelBubble) ? e.cancelBubble : e.stopPropagation; //Погасили всплытие
});

Рабочий пример

Comments

[andreyqin]

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

[Александр Глущенко]

@andreyqin На комментарии о которых вы говорите я внимания не обратил. Тут действительно виновен. Если решение было найдено почему было не проставить "решение". Кроме того я увидел в корне задачу "как предотвратить отправку формы". Ответ на которую у вас и так кажется был. Если вы ищете способ сделать return из callback-метода надстроенного цикла, через ядро jQuery то на мой взгляд это невозможно. Если же вы усматриваете в моих действиях нечто противоправное или подозреваете меня в недостойном "копирайте" или "воровстве" маякните, я с удовольствием удалю ответ ;)

[Илья Лесных]

@somenumboola зачем писать это:
(e.cancelBubble) ? e.cancelBubble : e.stopPropagation; //Погасили всплытие
ведь jQuery делает все за нас, можно просто:
e.stopPropagation(); //Погасили всплытие

[andreyqin]

@somenumboola, ничего, просто вам нужно было повнимательней прочитать вопрос. А задача решилась введением еще одной переменной, которая указывает, есть ли ошибки в цикле, и, если они есть, не дает следующим проверкам выполнится и отправиться форме.

[Александр Глущенко]

@Aliance это связано с разными версиями jQuery. В старых версиях насколько я помню отменяется через e.cancelBubble()

Answer 2

[Filipp Shcherbanich]

var $form = $(this),flag =0;
    $form.find('input:not([type="submit"])').each(function() {
        if (this.value == '') {
            this.focus();
	    alert('Заполните все поля');
	    flag = 1;
             return false;
        }
    });
if(flag)
return false;

Comments

[andreyqin]

А почему вы думаете, что это будет работать? Не работает, форма отправляется.

[andreyqin]

Но ваш пример подтолкнул на решение. Последняя проверка не такая должна быть. После цикла:

if (!flag) {
    /* отправляем ajax-запрос */
}
return false;

[Filipp Shcherbanich]

@andreyqin, я знаю, что это будет работать, если отправляется - скорее всего вы просто на другой селектор обработчик поставили.

[Filipp Shcherbanich]

@andreyqin, я бы вообще вынес отправку в функцию, если разбираться подробно)