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

[beebop]

Помогите, 2 часа уже мучаюсь(
Как по-нормальному убрать обработчик submit с формы? Он убирается, но форма отправляется со второго раза (т.е. 1й раз при нажатии на submit ничего не происходит).

http://jsfiddle.net/gwnhzez9/2/

[beebop]

Надо не аяксом отправить, т.е. убрать обработчик .on()

[danik.js]

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

[danik.js]

validateFields лучше чтоб возвращала true если все ок. Так логичнее.

[danik.js]

Ты не правильно это делаешь. У тебя ущербная разметка. Учись:

<style>
.site-form label{display: block;}
</style>
<form id="feedback-form" class="site-form no-ajax">
	<label>
		<span class="field-title">Представьтесь, пожалуйста</span>
		<input type="text" name="NAME" required>
	</label>
	<label>
		<span class="field-title">Контактный E-mail</span>
		<input type="email" name="EMAIL" required>
	</label>
	<label>
		<span class="field-title">Номер контактного телефона</span>
		<input type="tel" class="phone" name="PHONE" required>
	</label>
	<label>
		<span class="field-title">Ваше письмо</span>
		<textarea name="MESSAGE" required></textarea>
	</label>
	<div class="submit">
		<input type="submit" name="submit" value="Отправить письмо">
	</div>
</form>

Попробуй заслать без значений!

В новых браузерах все без всяких скриптов будет работать. В старых нужен костыль типа твоего скрипта. Хотя есть и готовые, не кривые, в отличие от твоего.

[danik.js]

Вот однажды начал было делать простой скрипт кастомизации (заодно и полифилл) html5 валидации:
http://jsfiddle.net/danya_postfactum/p1zde8v3/

К сожалению не сделал вывод сообщения об ошибке. Есть:
- поддержка required и pattern
- валидация поля по мере ввода
- добавление css-класса при валидации
- передача фокуса первому неверному полю
- поддержка кастомных правил валидации (через js код, не через разметку - не знаю хорошо это или плохо)
- независимость от сторонних либ

Минусы:
- зависимость от classList.js и addEventListener.js
- какие-то траблы вроде были с IE старыми
- не сделаны сообщения об ошибке
- не сделана дефолтная валидация поля типа email (и наверно еще каких-то)
- необходимость запуска функции для инициализации (хотя это не всегда минус)

Эт скорее для меня памятка.

[beebop]

<style>
.site-form label{display: block;}
</style>
<form id="feedback-form" class="site-form no-ajax">
	<label>
		<span class="field-title">Представьтесь, пожалуйста</span>
		<input type="text" name="NAME" required>
	</label>
	<label>
		<span class="field-title">Контактный E-mail</span>
		<input type="email" name="EMAIL" required>
	</label>
	<label>
		<span class="field-title">Номер контактного телефона</span>
		<input type="tel" class="phone" name="PHONE" required>
	</label>
	<label>
		<span class="field-title">Ваше письмо</span>
		<textarea name="MESSAGE" required></textarea>
	</label>
	<div class="submit">
		<input type="submit" name="submit" value="Отправить письмо">
	</div>
</form>

1. В старых ie все-таки нужен скрипт.
2. Сообщение об ошибке должно быть таким, каким его нарисовал дизайнер, а не таким, какой его браузер выведет.
3. Из скрипта и верстки я выложил только часть, чтобы было понятно, о чем речь. Там и добавление классов, и фокус на поле с ошибкой и много всего. Можешь называть костылем, но он работает так, как мне нужно.
4. Не тебе меня учить. И в данном случае ущербна твоя разметка.

Не следует так завышать ЧСВ, а то создается ощущение, что у тебя болт меньше, чем девушка хочет.

[beebop]

validateFields лучше чтоб возвращала true если все ок. Так логичнее.

Это уже кому как удобно.

[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 - однозначно не вариант. Стараюсь выпиливать эту дрянь отовсюду (да, я знаю, это не дрянь, это палочка-выручалочка ).