Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2014, 14:47
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Проверка заполнения полей формы
Добрый день! Имеется форма и простейший скрипт проверки:
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
        <div>
            <label for="fio" class="label">Ваше имя</label>
            <input type="text" value="" name="fio" id="fio" class="w-460" />
		<p id='err_fio' class='error'></p>
        </div>
        <div>
            <label for="phone" class="label">Телефон</label>
            <input type="text" value="" name="phone" id="phone" class="w-460" />
        </div>
      
            <input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>


<script type="text/javascript">
function checkForm(form){
	if (document.getElementById('fio').value=="") {
		document.getElementById('err_fio').innerHTML='Введите имя';
		return false;
	};
	return true;
};
</script>


При нажатии кнопки Submit происходит отправка формы без проверки заполнения поля "Ваше имя" с id="fio".

Пример скрипта взят с форума. Облазила аналогичные темы, но причину по-прежнему не могу найти. Прошу помочь.
Ответить с цитированием
  #2 (permalink)  
Старый 18.03.2014, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от kefalia
При нажатии кнопки Submit происходит отправка формы
непроисходит
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2014, 15:01
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Ок, допустим, что именно при таком раскладе не происходит (к сожалению, не могу уточнить информацию, так как редактирую действующий сайт в данный момент результаты заполнения формы отсылаются на чужой e-mail).

Тогда вопрос следующий: почему не подгружается нужная информация об ошибке в искомый div, а происходит перезагрузка страницы?
Ответить с цитированием
  #4 (permalink)  
Старый 18.03.2014, 15:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

kefalia,
всё подгружается - информация об ошибке в диве
ищите неправильные теги, форма в форме, одинаковые id.
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
        <div>
            <label for="fio" class="label">Ваше имя</label>
            <input type="text" value="" name="fio" id="fio" class="w-460" />
		<p id='err_fio' class='error'></p>
        </div>
        <div>
            <label for="phone" class="label">Телефон</label>
            <input type="text" value="" name="phone" id="phone" class="w-460" />
        </div>

            <input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>
 <script type="text/javascript">
function checkForm(form){
	if (document.getElementById('fio').value=="") {
		document.getElementById('err_fio').innerHTML='Введите имя';
		return false;
	};
	return true;
};
</script>

</body>

</html>

Последний раз редактировалось рони, 18.03.2014 в 15:06.
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2014, 15:17
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Пересохранила файл еще раз, все заработало. Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 18.03.2014, 22:41
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Доброй ночи
Пичаль заключается вот еще в чем:
<form onsubmit="return checkForm(this)" action="index.php" method="post">
<div id="contact-form">
        <div>
            <label for="fio" class="label">Ваше имя</label>
            <input type="text" value="" name="fio" id="fio" class="w-460" />
		<div id='err_fio' class='error'></div>
        </div>
        <div>
            <label for="phone" class="label">Телефон</label>
            <input type="text" value="" name="phone" id="phone" class="w-460" />
            <div id='err_phone' class='error'></div>
        </div>
        <div>
            <label for="email" class="label">E-mail</label>
            <input type="text" value="" name="email" id="email" placeholder="Введите, чтобы получить копию заказа" class="w-460" />
        </div>
	<div id='err_email' class='error' style="color: red;"></div>
      
            <input id="submit-form" type="submit" value="Оформить заказ" />
</div>
</form>

<script type="text/javascript">
function checkForm(form){
	 if (document.getElementById('email').value==""){
	document.getElementById('err_email').innerHTML='Заполните данные о заказчике';
		return false;
	}
	else {
	document.getElementById('err_email').innerHTML="";
	};

	if (document.getElementById('fio').value==""){
	document.getElementById('err_fio').innerHTML='Заполните данные о заказчике';
		return false;
	}
	else {
	document.getElementById('err_fio').innerHTML="";
	};

	if (document.getElementById('phone').value==""){
	document.getElementById('err_phone').innerHTML='Заполните данные о заказчике';
		return false;
	}
	else {
	document.getElementById('err_phone').innerHTML="";
	};

	
	return true;
};
</script>


Подозреваю, что я что-то намудрила с условиями.
Значение value передается только из поля с id="email", из остальных полей не передается ничего, даже если они заполнены.
Причем, если повесить на каждый input событие onblur="alert(this.value)", то во всплывающем окне появляется значение, введенное в поле, а в функцию - не передается.
То есть, сначала проверяется email (так было сделано с целью эксперимента), затем проверяется имя и, даже если поле заполнено, при повторном нажатии на submit, остается надпись "Заполните данные о заказчике".
Ответить с цитированием
  #7 (permalink)  
Старый 18.03.2014, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

kefalia,
может опять чего несохранили -- работает всё
Ответить с цитированием
  #8 (permalink)  
Старый 18.03.2014, 23:12
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Проблема решилась путем изменения id полей (видимо дублировались id)

Последний раз редактировалось kefalia, 19.03.2014 в 01:26.
Ответить с цитированием
  #9 (permalink)  
Старый 18.03.2014, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

kefalia,
неувидел этой ошибки
Ответить с цитированием
  #10 (permalink)  
Старый 19.03.2014, 00:13
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Уже все исправила (см. предыдущее сообщение) спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка заполнения формы zoOmer Оффтопик 3 27.05.2013 08:30
Проверка заполнения элементов формы Olegans Элементы интерфейса 0 07.04.2013 21:11
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 18:27
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14