Отправка формы после валидации
Помогите, 2 часа уже мучаюсь(
Как по-нормальному убрать обработчик submit с формы? Он убирается, но форма отправляется со второго раза (т.е. 1й раз при нажатии на submit ничего не происходит). http://jsfiddle.net/gwnhzez9/2/ |
Надо не аяксом отправить, т.е. убрать обработчик .on()
|
$form.on('submit', function(e) {
var isValid = твоиПроверки();
if (!isValid)
e.preventDefault();
});
|
validateFields лучше чтоб возвращала true если все ок. Так логичнее.
|
Ты не правильно это делаешь. У тебя ущербная разметка. Учись:
<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>
Попробуй заслать без значений! В новых браузерах все без всяких скриптов будет работать. В старых нужен костыль типа твоего скрипта. Хотя есть и готовые, не кривые, в отличие от твоего. |
Вот однажды начал было делать простой скрипт кастомизации (заодно и полифилл) html5 валидации:
http://jsfiddle.net/danya_postfactum/p1zde8v3/ К сожалению не сделал вывод сообщения об ошибке. Есть: - поддержка required и pattern - валидация поля по мере ввода - добавление css-класса при валидации - передача фокуса первому неверному полю - поддержка кастомных правил валидации (через js код, не через разметку - не знаю хорошо это или плохо) - независимость от сторонних либ Минусы: - зависимость от classList.js и addEventListener.js - какие-то траблы вроде были с IE старыми - не сделаны сообщения об ошибке - не сделана дефолтная валидация поля типа email (и наверно еще каких-то) - необходимость запуска функции для инициализации (хотя это не всегда минус) Эт скорее для меня памятка. |
Цитата:
1. В старых ie все-таки нужен скрипт. 2. Сообщение об ошибке должно быть таким, каким его нарисовал дизайнер, а не таким, какой его браузер выведет. 3. Из скрипта и верстки я выложил только часть, чтобы было понятно, о чем речь. Там и добавление классов, и фокус на поле с ошибкой и много всего. Можешь называть костылем, но он работает так, как мне нужно. 4. Не тебе меня учить. И в данном случае ущербна твоя разметка. Не следует так завышать ЧСВ, а то создается ощущение, что у тебя болт меньше, чем девушка хочет. |
Цитата:
|
Цитата:
|
beebop, читай мое последующее сообщение. Там решение двух из трех проблем.
Цитата:
Цитата:
В свой корявый FormValidator завтра постараюсь добавить сообщение об ошибке и исправить косяк с IE. Хотя addEventListener и classList - спорный момент, но jQuery - однозначно не вариант. Стараюсь выпиливать эту дрянь отовсюду (да, я знаю, это не дрянь, это палочка-выручалочка:) ). |
Цитата:
|
Цитата:
По разметке ты неправ. Я знаю возможности html5, мне это решение не подходит. Ошибки должны быть оформлены так, как нарисовал дизайнер, я уже писал об этом. Далее. Никакой разницы в данном случае нет, где писать required, если все равно браузерную валидацию буду отключать. Точнее есть. по сути, надо включить возможность валидации html5, а потом отключить. Где смысл? А для телефона вообще нужно использовать masked.input, потому что в дизайне так нарисовано и написано в тз. Цитата:
Special for you. Мне нужен ответ на вопрос, который я задал в самом начале. Чисто гипотетически предположи, что валидация будет происходить на сервере, а ее результат будет приходить аяксом. Тогда такое не прокатит: if(error) e.preventDefault() |
И насчет использования jquery, noscript и пр. Это тема холиваров по всему интернету, не надо здесь это обсуждать.
|
jQuery - не обсуждаю.
noscript - не холивар. Он есть, его используют. Есть качественные сайты, разработчики которых знают об этом. Есть кривые сайты и те которые не знают или попросту плюют. Че тут холиварить то? Это просто факты. Цитата:
Цитата:
$form.on('submit', function(e) {
e.preventDefault();
var form = this;
asyncValidation(function() {
form.submit();
});
});
Цитата:
form.noValidate = true Цитата:
Какая тебе блин разница как писать
if ($input.parent().hasClass('required'))
или
if ($input.attr('required'))
Цитата:
|
Цитата:
1. такие люди - исключение, и не факт, что они что-то будут покупать на сайте, если это магазин или сайт услуг. 2. это требует времени, но доплачивать не каждый заказчик захочет. Конечно, если я буду делать сайт для себя, то сделаю возможность его функционирования без скриптов. Может быть. Цитата:
Цитата:
form.noValidate = true А стандартизованная валидация не всегда подходит. Для того же телефона. Нужно, чтобы он был в формате +7xxxxxxxx. Ну и кроме email, tel и url есть много типов полей, которые стандартами w3 не предусмотрены. Для них все равно придется писать валидатор. У меня вместо type в таком случае используется класс (.phone, .email и т.д.). Не вижу ничего плохого в таком решении, оно гораздо более универсально, чем использование type. Опять же для совсем специфичных полей можно использовать data атрибуты (недавно надо было сделать ввод чисел, кратных 25). Этого ведь не предусмотрено в w3? Цитата:
При событии form.submit() у тебя опять вызовется весь этот код
$form.on('submit', function(e) {
e.preventDefault();
var form = this;
asyncValidation(function() {
form.submit();
});
});
И так будет до бесконечности. Ты его хоть пробовал запустить? Надо ипользовать .off(), чтобы убрать обработчик. |
Цитата:
Вообще, я недавно начал использовать NoScript, и честно сказать порой удивляюсь корректной работе некоторых сайтов. Хорошие сайты отображают сообщение о просьбе включить 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, где можно посмотреть че ты там мудришь. Просто интересно подойдет моя стряпня FormValidator под твои задачи или нет. Или хотя бы просто атрибуты из HTML5 валидации заюзать получится или нет.
|
Обновил свой скрипт: http://jsfiddle.net/danya_postfactum/p1zde8v3/1/
Добавил сообщение. Правда там все далеко от идеала. |
Цитата:
<form>
<label>Телефон:</label>
<input type="tel" required pattern="\+7[0-9]{10}" title="Российский номер телефона в международном формате. Одиннадцать цифр" placeholder="+7xxxxxxxxxx" />
<button type="submit">Отправить</button>
</form>
Короче, я понял. Ты просто не знаешь. Поэтому считаешь что оно тебе не подходит. Пока не услышал от тебя ни одного нормального аргумента против стандартных атрибутов. |
Удобство специализированных полей проявляется на устройствах с виртуальной клавиатурой (мобилы, планшеты). А трафик с них все растет и растет.
То есть плюсы использования налицо. Минусов никаких. Вывод - только дурак откажется от них. |
Цитата:
|
| Часовой пояс GMT +3, время: 15:21. |