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 that you have read and understand our privacy policy and code of conduct.

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