0

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

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> 

1 ответ 1

0

Проверять через интервал правильность ввода, довольно жестоко.
У всех полей есть эвент 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/

1
  • Спасибо, очень помогли! 26 янв 2017 в 19:30

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