Отправка формы после валидации

[beebop]

$form.on('submit', function(e) {
    var isValid = твоиПроверки();
    if (!isValid)
        e.preventDefault();
});

Как-то была проблема, что форма с бОльшим количеством полей и проверок отправляется до того как валидатор возвращал значение.

[danik.js]

beebop, читай мое последующее сообщение. Там решение двух из трех проблем.

Не тебе меня учить. И в данном случае ущербна твоя разметка.

Видимо учить тебя придется... К чему дибильные классы типа email required если есть атрибут type=email и required? Встроенная валидация при этом вырубается одной строчкой. Зато не надо ниче выдумывать. А еще - есть шибко умные люди, навроде меня, ставящие NoScript. Так вот даже с ним все будет отлично работать. И еще - в любом случае должна быть еще и серверная валидация. Это еще и как запасной вариант сработает.

Не следует так завышать ЧСВ,

Извини, написал грубовато немного. Но по разметке в целом я прав, ты не прав. Если думаешь иначе - подумай еще раз.

В свой корявый FormValidator завтра постараюсь добавить сообщение об ошибке и исправить косяк с IE. Хотя addEventListener и classList - спорный момент, но jQuery - однозначно не вариант. Стараюсь выпиливать эту дрянь отовсюду (да, я знаю, это не дрянь, это палочка-выручалочка ).

[danik.js]

Как-то была проблема, что форма с бОльшим количеством полей и проверок отправляется до того как валидатор возвращал значение.

Чепуха. У тебя там выпадала где-то ошибка значит. Если руки все-таки кривоваты - оберни в try..catch

[beebop]

beebop, читай мое последующее сообщение. Там решение двух из трех проблем.
Видимо учить тебя придется... К чему дибильные классы типа email required если есть атрибут type=email и required? Встроенная валидация при этом вырубается одной строчкой. Зато не надо ниче выдумывать. А еще - есть шибко умные люди, навроде меня, ставящие NoScript. Так вот даже с ним все будет отлично работать. И еще - в любом случае должна быть еще и серверная валидация. Это еще и как запасной вариант сработает.


Извини, написал грубовато немного. Но по разметке в целом я прав, ты не прав. Если думаешь иначе - подумай еще раз.

В свой корявый FormValidator завтра постараюсь добавить сообщение об ошибке и исправить косяк с IE. Хотя addEventListener и classList - спорный момент, но jQuery - однозначно не вариант. Стараюсь выпиливать эту дрянь отовсюду (да, я знаю, это не дрянь, это палочка-выручалочка ).

Дебильные классы нужны для css, это их основное предназначение. Сереверная валидация есть, я ее не затрагивал в этой теме.

По разметке ты неправ. Я знаю возможности html5, мне это решение не подходит. Ошибки должны быть оформлены так, как нарисовал дизайнер, я уже писал об этом.
Далее. Никакой разницы в данном случае нет, где писать required, если все равно браузерную валидацию буду отключать. Точнее есть. по сути, надо включить возможность валидации html5, а потом отключить. Где смысл? А для телефона вообще нужно использовать masked.input, потому что в дизайне так нарисовано и написано в тз.

Чепуха. У тебя там выпадала где-то ошибка значит. Если руки все-таки кривоваты - оберни в try..catch

Откуда у тебя такая манера критиковать то, что ты не видел? Я, правда, не могу сейчас вспомнить, почему мне такой вариант не подходил, но я не случайно стал по-другому делать.

Special for you. Мне нужен ответ на вопрос, который я задал в самом начале. Чисто гипотетически предположи, что валидация будет происходить на сервере, а ее результат будет приходить аяксом. Тогда такое не прокатит:

if(error) e.preventDefault()

[beebop]

И насчет использования jquery, noscript и пр. Это тема холиваров по всему интернету, не надо здесь это обсуждать.

[danik.js]

jQuery - не обсуждаю.
noscript - не холивар. Он есть, его используют. Есть качественные сайты, разработчики которых знают об этом. Есть кривые сайты и те которые не знают или попросту плюют.
Че тут холиварить то? Это просто факты.

Откуда у тебя такая манера критиковать то, что ты не видел?

Ты сделал акцент на том что полей было много. Этот фактор не имеет никакого влияния. Причина может быть только одна - прерывание потока выполнения кода, то есть exception (предположил что ума хватило не втыкнуть return куда попало). Или ты знаешь другие причины? Что ж, приведи пример.

Мне нужен ответ на вопрос, который я задал в самом начале

Ответ был дан уже. Сейчас ты уже другие условия озвучил. Для случая асинхронной проверки делай так:

$form.on('submit', function(e) {
    e.preventDefault();
    var form = this;
    asyncValidation(function() {
        form.submit();
    });
});

Ошибки должны быть оформлены

form.noValidate = true

надо включить возможность валидации html5, а потом отключить. Где смысл?

Смысл в декларативном описании правил валидации, причем стандартизированном. А также как бонус - поддержка noscript. Это бонус - и он ничего не стоит.

Какая тебе блин разница как писать

if ($input.parent().hasClass('required'))

или

if ($input.attr('required'))

Дебильные классы нужны для css, это их основное предназначение

Если это действительно так, то все ок. Я просто предположил что они тебе нужны для описания правил валидации. Но тогда возникает вопрос - а где тогда эти правила описаны?

[beebop]

form.noValidate = true

По поводу noscript поясню. Если в дизайне много функционала, который без js не сможет быть реализован, то нет смысла делать поддержку пользователей с отключенным js. Эти вещи сделаны не для красоты, а для удобства (всплывающие окна, та же валидация, ajax запросы). Конечно, можно добавить поддержку таких пользователей, но:
1. такие люди - исключение, и не факт, что они что-то будут покупать на сайте, если это магазин или сайт услуг.
2. это требует времени, но доплачивать не каждый заказчик захочет.

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

Ты сделал акцент на том что полей было много. Этот фактор не имеет никакого влияния. Причина может быть только одна - прерывание потока выполнения кода, то есть exception (предположил что ума хватило не втыкнуть return куда попало). Или ты знаешь другие причины? Что ж, приведи пример.

Вообще я сейчас покопался и не нашел сайт, на котором была эта проблема) Но дело точно не в ошибке. Скорее всего там что-то аяксом должно было вернуться до отправки.

if ($input.parent().hasClass('required'))

Вот именно - разницы никакой. Поэтому я сделал так. Просто не надо дополнительно писать

form.noValidate = true

А стандартизованная валидация не всегда подходит. Для того же телефона. Нужно, чтобы он был в формате +7xxxxxxxx.
Ну и кроме email, tel и url есть много типов полей, которые стандартами w3 не предусмотрены. Для них все равно придется писать валидатор.

У меня вместо type в таком случае используется класс (.phone, .email и т.д.). Не вижу ничего плохого в таком решении, оно гораздо более универсально, чем использование type. Опять же для совсем специфичных полей можно использовать data атрибуты (недавно надо было сделать ввод чисел, кратных 25). Этого ведь не предусмотрено в w3?

$form.on('submit', function(e) {
    e.preventDefault();
    var form = this;
    asyncValidation(function() {
        form.submit();
    });
});

Вот тут и всплывает то, что ты совершенно не понял проблему.
При событии form.submit() у тебя опять вызовется весь этот код

$form.on('submit', function(e) {
    e.preventDefault();
    var form = this;
    asyncValidation(function() {
        form.submit();
    });
});

И так будет до бесконечности. Ты его хоть пробовал запустить? Надо ипользовать .off(), чтобы убрать обработчик.

[danik.js]

если это магазин

Тем более магазины. В них все должно работать и покупаться даже если зайти с холодильника. Все нормальные движки магазов по дефолту работают без скриптов. Помню компонент miniShop для MODx изначально не работал. Однако автор по по просьбе разработчиков (не помню, может даже по моей) быстро это исправил. И даже слова не сказал против.

Вообще, я недавно начал использовать NoScript, и честно сказать порой удивляюсь корректной работе некоторых сайтов. Хорошие сайты отображают сообщение о просьбе включить js. Причем это не тупой текст на весь сайт непонятно о чем, а в конкретном месте для конкретных целей (слайдер там какой-нибудь).

Но если заказчик не знает и слышать не хочет, и тем более доплачивать за это - то можно понять.

[danik.js]

Ты его хоть пробовал запустить?

Дружище, вот как раз ты и не запускал его

<form action="javascript:'форма отправлена'">
    <button type="submit">Оптравить</button>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var $form = $('form');
var asyncValidation = function(callback) {
    $form.text('Делаем проверки...');
    setTimeout(callback, 2000);
};


$form.on('submit', function(e) {
    e.preventDefault();
    var form = this;
    asyncValidation(function() {
        form.submit();
    });
});

</script>

form.submit не генерирует событий.

[beebop]

form.submit не генерирует событий.

Это я где-то упустил. Вот и ответ. А все остальное в теме - от лукавого)
Спасибо.