Подсчет элементов с классом `.errror`

0

Я использую прецедент из базы данных zurb для проверки входов с клиентской стороны. У меня есть 4 поля ввода, которые проверяются через js. Я использую jquery для подсчета .error после нажатия кнопки отправки, но возвращаю неожиданные значения. После нажатия кнопки " .errors дважды число .errors показывает счет 8 даже если есть только 4 поля .errors. Как я могу отобразить число .errors, которые видны в форме? ССЫЛКА

<script>
      var $error_items = 0;
      $("#submit").click(function(e){
        $error_items = $(".error").length;
        alert($error_items);
      });
    </script>

HMTL

<form data-abide>
              <div class="name-field">
                <label>Your name <small>required</small>
                  <input type="text" required pattern="[a-zA-Z]+">
                </label>
                <small class="error">Name is required and must be a string.</small>
              </div>
              <div class="name-field">
                <label>User name <small>required</small>
                  <input type="text" name="users_name" required pattern="[a-zA-Z]+">
                </label>
                <small class="error">Username is required and must be a string.</small>
              </div>
              <div class="email-field">
                <label>Email <small>required</small>
                  <input type="email" required>
                </label>
                <small class="error">An email address is required.</small>
              </div>
              <div class="password-field">
                <label>Password <small>required</small>
                  <input type="password" id="password" required pattern="password">
                </label>
                <small class="error">Your password must match the requirements</small>
              </div>

              <button type="submit" id="submit">Submit</button>
            </form>
Теги:

2 ответа

1
Лучший ответ

Если вы проверите DOM после нажатия кнопки "Отправить", вы увидите следующее для каждой из ваших меток ошибок:

<label class="error"></label>    
<small class="error"></small>

Один добавлен вами изначально, а другой добавлен динамически после нажатия кнопки отправки. Счет 8 правилен.

Вы можете просто хотеть считать label.error поскольку это похоже на то, что вы пытаетесь подсчитать.

  • 0
    теперь возвращается 0, проверьте ССЫЛКУ
0

Вы можете считать только видимые метки ошибок с помощью видимого селектора, например:

$('small.error:visible').length

Ещё вопросы

Сообщество Overcoder
Наверх
Меню