Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2015, 18:04
Интересующийся
Отправить личное сообщение для beebop Посмотреть профиль Найти все сообщения от beebop
 
Регистрация: 11.11.2012
Сообщений: 22

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

http://jsfiddle.net/gwnhzez9/2/
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2015, 19:10
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

beebop, че за submit в submite если ajax то e.preventDefault(); вот и всё условие.
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2015, 19:27
Интересующийся
Отправить личное сообщение для beebop Посмотреть профиль Найти все сообщения от beebop
 
Регистрация: 11.11.2012
Сообщений: 22

Надо не аяксом отправить, т.е. убрать обработчик .on()
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2015, 19:37
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

$form.on('submit', function(e) {
    var isValid = твоиПроверки();
    if (!isValid)
        e.preventDefault();
});
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2015, 19:39
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

validateFields лучше чтоб возвращала true если все ок. Так логичнее.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2015, 19:40
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

beebop, не вешай обработчик отправится не аяксом.
Ответить с цитированием
  #7 (permalink)  
Старый 10.01.2015, 19:43
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ты не правильно это делаешь. У тебя ущербная разметка. Учись:
<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>

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

В новых браузерах все без всяких скриптов будет работать. В старых нужен костыль типа твоего скрипта. Хотя есть и готовые, не кривые, в отличие от твоего.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 10.01.2015, 20:03
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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

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

Эт скорее для меня памятка.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 10.01.2015, 20:15
Интересующийся
Отправить личное сообщение для beebop Посмотреть профиль Найти все сообщения от beebop
 
Регистрация: 11.11.2012
Сообщений: 22

Сообщение от 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>

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

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


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

Не следует так завышать ЧСВ, а то создается ощущение, что у тебя болт меньше, чем девушка хочет.
Ответить с цитированием
  #10 (permalink)  
Старый 10.01.2015, 20:18
Интересующийся
Отправить личное сообщение для beebop Посмотреть профиль Найти все сообщения от beebop
 
Регистрация: 11.11.2012
Сообщений: 22

Сообщение от danik.js Посмотреть сообщение
validateFields лучше чтоб возвращала true если все ок. Так логичнее.
Это уже кому как удобно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отправка формы Moloch AJAX и COMET 12 12.03.2014 23:30
После эмуляции события Click не работает отправка формы (IE 9) denic-nik Internet Explorer 4 01.08.2013 16:15
Отправка данных формы AJAX`ом? Jopses jQuery 4 20.02.2013 12:34
Отправка формы с помощью XMLHttpRequest2 и FormData pav jQuery 3 05.10.2011 10:16
Помогите написать скрипт валидации формы RayOfLight Общие вопросы Javascript 2 27.07.2009 11:58