2

Здравствуйте. Есть форма, состоящая из 2 частей. В первой части пользователь вводит свои данные (имя, почту, мобилу) и при нажатии на кнопку отправить происходит скрытие первой части формы и появление второй части, в которой есть одно поле и уже реальная кнопка отправить.

Скрытие и появление частей формы выполнено таким скриптом:

  <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box2").fadeIn(); // fadeIn - плавное появление
        $("DIV#box1").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        $("DIV#box1").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

Подскажите как мне реализовать простейшую валидацию формы. Мысль есть такая - при нажатии на кнопку отправить в первой части формы происходит проверка поля email и name и если они заполнены неверно не происходит скрытие первого блока и отображение второго. ну и какой-нибудь простенький вывод об ошибке.

Пытаюсь такой скрипт прикрутить, не получается:

function validate(autoform,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[autoform].elements[email].value;
   if(reg.test(address) == false) {
$("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        $("DIV#box1").fadeIn(); // fadeIn - плавное появление
      alert('Введите корректный e-mail');
      return false;
   }
}

То есть делаю так:

  <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger").toggle(function() { 

   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[autoform].elements[email].value;
   if(reg.test(address) == false) {
      alert('Введите корректный e-mail');
      return false;
   }
else {
        // Отображаем скрытый блок 
        $("DIV#box2").fadeIn(); // fadeIn - плавное появление
        $("DIV#box1").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        $("DIV#box1").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

UPD: Добавляю код формы

<form autocomplete="off" method="post" id="autoform" action="/send.php">
<div id="box1">
<div class="form-group">    
    <input type="text" name="name" class="form-control" value="" placeholder="Ваше имя">
</div>
<div class="form-group">    
    <input type="text" name="email" id="email" class="form-control" value="" placeholder="Ваш email">
</div>
<div class="form-group">    
    <input type="text" name="phone" class="form-control" value="" placeholder="Ваш телефон">
</div>
<a href='#' id='trigger' class='btn btn-danger'>Отправить</a>
</div>
<div id='box2' style='display: none;'>
<div class="form-group">    
    <input type="text" name="ids" value="">
</div></div>
<button type="submit" class='btn btn-danger'>Отправить</button>
</div>
</form>

Исправил функцию так:

  <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger").toggle(function() { 
        // Отображаем скрытый блок
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var email = document.getElementById("email").value;
if(reg.test(email) == false) {
alert('Вы ввели не корректный E-Mail!');
}
else { 
$("DIV#box1").fadeOut();
$("DIV#box2").fadeIn();
}
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        $("DIV#box1").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

Все вроде бы правильно работает. НО! После того, как ввел неправильно вылезает alert я его закрываю, правлю email, чтобы был правильным и кнопка отправить работает со второго нажатия. Почему?

3
  • А почему бы вам не воспользоваться заточенными под это плагинами? Вот например подборочка: unheap.com/section/inputs-forms/validation
    – IonDen
    9 июн 2015 в 11:43
  • Потому что в большинстве своем они работают при отправке формы, а у меня нет еще отправки, а просто идет скрытие части формы и появление другой части. Да и они в основном довольно тяжеловесны, а мне нужно 2-3 поля валидировать.
    – Batyabest
    9 июн 2015 в 11:48
  • Если у вас обычный сайт, то тяжеловесность там на самом деле такая копеечная, что я бы не стал на этом экономить. Лучше другие способы оптимизировать используйте.
    – IonDen
    9 июн 2015 в 11:56

1 ответ 1

2

Вы не понимаете, что делает и как работает та функция, которую пытаетесь прикрутить. Давайте на нее посмотрим:

function validate(autoform,email) {
  //в оригинальном коде нам передают айди формы и айди элемента, который содержит адрес почты
  //например, 'my_form' и 'my_mylo'

  //далее мы определяем регулярное выражение, описывающее валидный мейл
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  //тут мы вытаскиваем значение нужного поля в документе 
  //внутри функции переменные autoform и email нам переданы
  //но в вашем коде они ничего не значат, вы ничего не получаете
   var address = document.forms[autoform].elements[email].value;

  //в общем, в address должна быть та строка, которую мы пытаемся валидировать
  //а как вы этого добьетесь - зависит от HTML кода, который вы поленились нам привести

  //далее, если тест провалился, то зачем мы прячем-показываем форму? я так понимаю, мы ничего не должны делать и не показывать вторую часть
   if(reg.test(address) == false) {
        //нафиг $("DIV#box2").fadeOut();
        //нафиг $("DIV#box1").fadeIn();
      alert('Введите корректный e-mail'); //вот это хорошо

      //утащенная вами функция умела возвращать значение true / false
      //у вас же этого нет вообще
      //поэтому этот кусок тоже уберем: return false;
      //и допишем, что делать в случае успеха
   } else {
      //тут надо как раз показать вторую часть формы
        $("DIV#box1").fadeOut();
        $("DIV#box2").fadeIn();
   }
}

Как-то так. Я понимаю, что это не "ответ", можете его таковым не помечать, но ваша цель с такими задачками - научиться и разобраться, а не слепить поделку, не приходя в сознание.

1
  • Добавил код формы, но не пойму почему у меня autoform и email ничего не значат? Они же есть в форме.
    – Batyabest
    9 июн 2015 в 11:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.