Элементы count с классом `.errror`

Question

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

<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> 

Answer 1

Если вы осмотрите DOM после нажатия на кнопку отправки, вы увидите следующую информацию по каждому из ярлыков ошибок:

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

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

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

Answer 2

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

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