Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2019, 18:24
Аспирант
Отправить личное сообщение для rodiony4 Посмотреть профиль Найти все сообщения от rodiony4
 
Регистрация: 26.10.2015
Сообщений: 97

Проверка формы
Здравствуйте
есть форма, вот пример
<div id="ddd" style="border: 1px solid #CCCCCC; width:50px; height:10px; background:#f00; margin-bottom: 10px;"></div>

<form action="#" method="post" name="ckform" onsubmit="return ckformcheck()">
 <p>Имя</p> <input type="text" class="validate" name="name"/>
 <p>Email</p> <input type="text" class="validate" name="email"/>
 <p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br />
 <input name="submit_bt" id="submit_bt" class="buttonRED" style="background:#ccc; padding:8px 10px;" type="submit" value="Отправить" />
</form>

<script type="text/javascript">
$("#submit_bt").live("click", function(){
	var name = $(".validate").val(); 
	if (name == "") { 
		$(".validate").addClass('fc-error');
	}else{
		$(".validate").removeClass('fc-error');
	};
	check();
});

check = function ckformcheck(form){
	if($(".fc-error").length > 0){
		alert("err");	
		//return false;
		}else{
		alert("NO err");
		$("#submit_bt").attr('value', 'Форма отправляется');  
		$("#ddd").animate({'width':'900'},2500);
		$("#submit_bt").prop('disabled', true); 
		return false;
		// как продолжить отправку формы? return true;
	};
};
</script>

есть проблемы, пожалуйста, помогите
1. в переменной check, в которую записана функция ckformcheck - не срабатывает onsubmit (return false; не останавливает форму) в браузерах ie и мозила
Если функцию не записывать в переменную то все ок. Но нужно именно записать функцию в переменную.
2. в условии функции ckformcheck (если не существует инпута с классом .fc-error), то нужно выполнить следующие:
- остановить отправку формы
- изменить текст на кнопке, выполнить анимацию, заблокировать кнопку
- продолжить отправку формы

без onclick и preventDefault
в кнопке нельзя менять type="submit" на type="button" , а также input на div

Последний раз редактировалось rodiony4, 16.04.2019 в 19:02.
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2019, 08:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rodiony4
продолжить отправку формы
Если форма отправляется - ты уже не теряешь управление...

Не делай обработку кнопки submit. Более оптимальный вариант - все делать в onsubmit формы.

А вот это
Сообщение от rodiony4
check = function ckformcheck(form){/**/};
Какая-то фигня.
У функции и так есть идентификатор его и нужно использовать. Зачем еще и ссылку на эту функцию хранить?
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2019, 00:48
Аспирант
Отправить личное сообщение для rodiony4 Посмотреть профиль Найти все сообщения от rodiony4
 
Регистрация: 26.10.2015
Сообщений: 97

Сообщение от ksa
Если форма отправляется - ты уже *не теряешь управление...
да, я уже это понял (*теряешь -очепятка))
Сообщение от ksa
Не делай обработку кнопки submit. Более оптимальный вариант - все делать в onsubmit формы.
ksa, можно подробней или пример.

Я понял, что без preventDefault не обойтись, сделал так:
<div id="ddd" style="border: 1px solid #CCCCCC; width:50px; height:100px; background:#f00; margin-bottom: 10px;"></div>

<form action="#" method="post" name="ckform">
 <p>Имя</p> <input type="text" class="validate" name="name"/>
 <p>Email</p> <input type="text" class="validate" name="email"/>
 <p>Сообщение</p><textarea name="message" rows="6" cols="25"></textarea><br />
 <input name="submit_bt" id="submit_bt" class="buttonRED" style="background:#ccc; padding:8px 10px;" type="submit" value="Отправить" />
</form>

<script type="text/javascript">
function cancelEvent(event) { //IE
   if (event.preventDefault) { 
      event.preventDefault();
   } else {
      event.returnValue = false; 
   }
}

$("#submit_bt").live("click", function(){
	var name = $(".validate").val(); 
	if (name == "") { 
		$(".validate").addClass('fc-error');
	}else{
		$(".validate").removeClass('fc-error');
	};
	check();
});

function check(event){
	if($(".fc-error").length > 0){
		//alert("err");	
		}else{
		event.preventDefault();
		var self = this;
		//alert("NO err");
		$("#submit_bt").attr('value', 'Форма отправляется'); 
		$("#submit_bt").prop('disabled', true); 
		$("#ddd").animate({'width':'590'},2500, function(){  self.form.submit();  });  
	};
};
</script>

Передаю значение функции check в другую функцию (которая с кликом), в итоге preventDefault не работает. Если все сделать в одной функции, тогда все ОК. Но нужно именно значение одной функции, передать в другую. Это возможно?

Последний раз редактировалось rodiony4, 19.04.2019 в 02:00.
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2019, 07:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rodiony4
можно подробней или пример
Вот типа такого...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	var o=document.getElementsByTagName('form')[0];
	o.addEventListener('submit',function(Event){
		// тут и нужно делать все действия
		alert(1);
		if (false) {
			// если все хорошо - форма отправляется
		} else {
			// если что-то не так - форма не отправляется
			Event.preventDefault();
		};
	});
});
</script>
</head>
<body>
<form>
	<label for="num">Введите Ваш номер (число от 1 до 350): </label>
	<input type="number" name="num" step="1" min="1" max="350" value="1" id="num"/>
	<br>
	<button type="submit">Подтвердите ввод</button>
</form>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2019, 07:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rodiony4
Передаю значение функции check в другую функцию (которая с кликом), в итоге preventDefault не работает.
Конечно не работает, ей же не передали параметр event...
Ответить с цитированием
  #6 (permalink)  
Старый 19.04.2019, 08:10
Аспирант
Отправить личное сообщение для rodiony4 Посмотреть профиль Найти все сообщения от rodiony4
 
Регистрация: 26.10.2015
Сообщений: 97

Сообщение от ksa Посмотреть сообщение
Конечно не работает, ей же не передали параметр event...
а как передать?
Если так: check(event);
то все равно не работает

Последний раз редактировалось rodiony4, 19.04.2019 в 08:12.
Ответить с цитированием
  #7 (permalink)  
Старый 19.04.2019, 09:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rodiony4
а как передать?
Там, где ты вызываешь эту функцию нет такого объекта...
Сообщение от rodiony4
Если так:
check(event);

то все равно не работает
Так это вообще ошибку будет генерить - не определенная переменная.

Программирование это не написание некоего текста на английскими буквами.
Тут кагбэ нужно понимать, что происходит и как этим всем пользоваться.

Если не понимаешь - прямой путь в раздел Работа.
Ответить с цитированием
  #8 (permalink)  
Старый 19.04.2019, 10:52
Аспирант
Отправить личное сообщение для rodiony4 Посмотреть профиль Найти все сообщения от rodiony4
 
Регистрация: 26.10.2015
Сообщений: 97

ksa, спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка авторизации перед отправкой формы Hapson AJAX и COMET 1 17.03.2014 11:58
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 01:00
Проверка данных формы составным условием? myafa Элементы интерфейса 8 01.04.2011 08:30
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
Простая проверка формы. Добавить "динамики". Jurasmi Элементы интерфейса 3 07.04.2010 16:48