0

Есть форма:

<form action="" method="POST">
    <p><input name="name" placeholder="Enter your name" type="text"></p>
    <p><input name="phone" placeholder="Enter your phone" type="text"></p>
    <select>
        <option>Chose your class</option>
    </select>
    <div class="messenger"></div>
    <button type="submit" name="submit " class="TryIt">Try it</button>
</form>

На данный момент проверяется на заполнение этим скриптом:

var field = new Array('name', 'phone');

$('form').submit(function() {
  var error = 0;
  $('form').find('input').each(function() {
    for (var i = 0; i < field.length; i++) {
      if ($(this).attr('name') == field[i]) {
        if (!$(this).val()) {
          $(this).css('border', 'red 1px solid');
          error = 1;
        } else {
          $(this).css('border', 'none');
        }
      }
    }
  });
  if (error = 0) {
    return true;
  } else {
    if (error = 1) var err_text = 'Not all fields are filled!';
    $('.messenger').html(err_text);
    $('.messenger').fadeIn('slow');
    return false;
  }
});

Срабатывает предупреждение о незаполненных полях, даже если они заполнены. Почему так? Так же изменить/дополнить скрипт, чтобы поле ввода номера телефона проверялось на тип вводимых данных и при неправильном вводе выводилось сообщение об ошибке в блок с классом .messenger. В js/jquery не силен.

Как можно это реализовать?

Вот ссылка на сайт https://bohdan29.github.io/

2
  • Для проверки ввода данных, таких как номер телефона, копайте в сторону "jQuery Masked Input"
    – Al Mr
    24 июл 2017 в 4:53
  • понял, а что по поводу того что проверка формы на заполнение некорректно работает, в том плане, что даже при заполненных полях выдается ошибка? Вы можете подсказать?
    – nirolo1
    24 июл 2017 в 4:57

1 ответ 1

3

У Вас ошибка в коде в условии if()

if (error = 0) {
    return true;
  } else {
    if (error = 1) var err_text = 'Not all fields are filled!';
    $('.messenger').html(err_text);
    $('.messenger').fadeIn('slow');
    return false;
  }

Вместо сравнения == Вы присваиваете переменной error значения 0 и 1. Исправьте код JS, чтобы он выглядел вот так.

var field = new Array('name', 'phone');

$('form').submit(function() {
  var error = 0;
  $('form').find('input').each(function() {
    for (var i = 0; i < field.length; i++) {
      if ($(this).attr('name') == field[i]) {
        if (!$(this).val()) {
          $(this).css('border', 'red 1px solid');
          error = 1;
        } else {
          $(this).css('border', 'none');
        }
      }
    }
  });
  if (error == 0) {
    return true;
  } else {
    if (error == 1) var err_text = 'Not all fields are filled!';
    $('.messenger').html(err_text);
    $('.messenger').fadeIn('slow');
    return false;
  }
});
1
  • Помогло, спасибо
    – nirolo1
    24 июл 2017 в 5:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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