Форум

DmitriSpartak · #1 (**permalink**) 29.05.2015, 15:21

При заполнении формы, javascrip проверяет поля на пустоту, если поля пустые, выдается алерт.
Проблема в том, что форма находится внизу страницы, а после этого страница перезагружается, т.е. пользователь снова попадает в самое начала.
я так понимаю, что данные попадают в обработчик php и из-за этого страница и перезагружается.
Скажите, как предотвратить отправку формы, в случае если инпуты не проходят проверку в функции cheker2()

Форма:

<form action="/" method="POST">
	<p><label>Ваше имя:<br/><input id="name2" name="name" type="text"/></label></p>
	<p><label>Ваш телефон:<br/><input name="tel" id="tel2" type="text"/></label></p>
	<p id="button_p"><input name="button_f" value="ok" type="image" src="img/okbutton.png" alt="ОК" onClick="cheker2()"></p>
</form>

Код javascript:

function cheker2()
{
	var tel2 = document.getElementById("tel2");
	var name2 = document.getElementById("name2");
	if(tel2.value=='' || name2.value=='')
	{
	  alert("Заполните все поля");
	}
}

Decode · #2 (**permalink**) 29.05.2015, 17:04

DmitriSpartak, можно так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <form action="/" method="POST">
    <p><label>Ваше имя:<br/><input id="name2" name="name" type="text"/></label></p>
    <p><label>Ваш телефон:<br/><input name="tel" id="tel2" type="text"/></label></p>
    <p id="button_p">
      <input name="button_f" value="ok" type="image" src="img/okbutton.png" alt="ОК">
    </p>
  </form>
  
  <script>
    var form = document.forms[0];
    
    form.addEventListener('submit', function(e) {
      var inpElems = form.querySelectorAll('input[type="text"]'),
          result = true;
      
      for(var i = 0; i < inpElems.length; i++) {
        if( !inpElems[i].value.match(/^\S+/) ) {
          result = false;
          e.preventDefault();
        }
      }
      
      if(!result) alert('Заполните все поля!');
    });
  </script>
</body>
</html>

Decode · #3 (**permalink**) 29.05.2015, 20:13

DmitriSpartak,

function cheker2()
{
	var tel2 = document.getElementById("tel2");
	var name2 = document.getElementById("name2");
	if(tel2.value=='' || name2.value=='')
	{
	  alert("Заполните все поля");
          return false;
	}
}

kostyanet · #4 (**permalink**) 29.05.2015, 21:21

Выкинуть вот эту шнягу type="image" и вообще никаких кнопок там не рисовать и никуда оно никогда не уйдет без вашего согласия. Кнопку нарисовать вот так:

<a class="btn-submit" onclick="validate(this)">Отправить</a>

kostyanet · #5 (**permalink**) 29.05.2015, 21:24

Совет хозяйке. Поле телефона сделайте type="tel" и еще один - поменяйте пост на гет. Для таких примитивных задач POST не нужен. Тогда вам и форма не нужна будет (в общем и для post она не нужна такая). Нарисовали два поля в диве, кнопку а - и скриптом накрыли все.

Форум

Справочник

Discord чат

Курсы javascript