I am using abide from foundation zurb to validate inputs from the client side. I have 4 input fields that are being validated through js. I am using jquery to count `.error` after submit button click but I am getting unexpected values returned. After clicking the submit button twice the number of `.errors` shows count `8` even if there is only just 4 `.errors` fields. How can I display number of `.errors` that are visible in the form? [LINK](http://holaweblearning.co.nf/mobile/index.php)

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

```