Настройка формы регистрации js php [требует правки]

359
28 января 2017, 11:05

Как корректно сделать проверку на условия регистрации?

setInterval(function() {
  var $first_pass = $('.first_pass').val();
  var $second_pass = $('.second_pass').val();
  var $login_val = $('.login_input').val();
  if ($first_pass.length === 0) {
    $('.ok_pass').hide();
    $('.not_ok_pass').hide();
    $('.form_reg').attr('action', '#');
  } else if ($first_pass !== $second_pass) {
    $('.ok_pass').hide();
    $('.not_ok_pass').fadeIn();
    $('.form_reg').attr('action', '#');
  } else if ($first_pass == $second_pass) {
    $('.ok_pass').fadeIn();
    $('.not_ok_pass').hide();
    $('.form_reg').attr('action', 'reg_action.php');
  };
$.ajax({
  url: 'check.php',
  type: "POST",
  data: $('.form_reg').serialize(),
  success: function(check) {
    var $check_login = check;
    if ($check_login == 1) {
      $('.ok').fadeIn();
      $('.not_ok').hide();
      $('.not_ok_login').fadeOut();
      $('.form_reg').attr('action', 'reg_action.php');
    } else if ($check_login == 0) {
      $('.not_ok_login').fadeOut();
      $('.ok').hide();
      $('.not_ok').fadeIn();
      $('.form_reg').attr('action', '#');
    } else if ($check_login == 2) {
      $('.ok').fadeOut();
      $('.not_ok').fadeOut();
      $('.form_reg').attr('action', '#');
    }
  }
  },1000);
if (!$('.first_pass').val() && !$('.second_pass').val() && !$('.login_input').val()) {
  $('.form_reg').attr('action', '#');
};
});


<div class="container">
  <div class="login_holder">
  <img src="../img/logo.png" id="test" alt="" style="margin: 0 auto; display: block;">
    <form class="form_reg" action="#" method="POST">
      <input type="text" class="login_input" name="login" placeholder="Логин">
      <p class="not_ok">Простите, этот логин уже занят.</p>
      <p class="ok">Этот логин можно использовать!</p>
      <p class="more_3">Логин должен быть больше 3 символов</p>
      <input type="text" class="login_input" name="email" placeholder="Email">
      <input type="password" class="login_input first_pass" name="password" placeholder="Пароль">
      <p class="not_ok_pass">Пароли не совпадают!</p>
      <p class="ok_pass">Пароли совпадают!</p>
      <input type="password" class="login_input second_pass" placeholder="Повторите пароль">
      <input type="submit" class="submit_input" value="Зарегестрироваться">
    </form>
  </div> 
Answer 1

Проверять через интервал правильность ввода, довольно жестоко.
У всех полей есть эвент change (статья/урок по работе с эвентами для полей), который всплывает когда человек любые манипуляции с полем делает. Используйте готовое решение http://rickharrison.github.io/validate.js/ например.

В интернете не мало валидаторов, но этот на мой взгляд самый удобный и рабочий.
Я бы вам посоветовал бы использовать нативную проверку от браузеров, но safari до сих пор пока не поддерживает ее.

Валидатор сначала проверяет форму, потом разрешает ее отправлять, когда он разрешает ее отправлять, вы прерываете отправление нативное с помощь event.preventDefault();, а потом собираете данные с формы и отправляете через ajax.

Если вам нужно и backend проверка формы, то делайте это через один скрипт, А не через несколько. У вас должнен один скрипт должен отвечать за эти простые вещи, а не несколько.

Так же не создавайте несколько блоков с "ошибками" и "все ок". У вас один блок может за это отвечать, просто в зависимости от ситуации меняете ему содержимое и класс которые красит его в красный или зеленый.

Если вы используйте jQuery и ajax отправку, то в form атрибуты можно вообще ничего не писать. А использовать эвент submit

$('form').on('submit', function(e) {
    e.preventDefault();
  console.log($(this).serialize());
})

https://jsfiddle.net/dimensi/8Lzoqw7s/

READ ALSO
animate.css и jQuery

animate.css и jQuery

Почему при hover только один элемент анимируется? хотя id одинаковый данПри помощи CSS при hover каждый элемент с одинаковым class/id анимируется

451
Разделение списка на несколько колонок

Разделение списка на несколько колонок

Здравствуйте! Имеется достаточно длинный список, особенность которого заключается в расположении его пунктовОни должны следовать друг...

324
Несколько меню в одном SlickNav

Несколько меню в одном SlickNav

Постараюсь вкратце описать суть проблемы: У меня есть мобильное меню, подключенное с помощью плагина SlickNav

337
Передача параметра по ссылке с++

Передача параметра по ссылке с++

Как передать функции параметр по ссылке со значением по умолчанию?

298