Я использую прецедент из базы данных 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>
Если вы проверите DOM после нажатия кнопки "Отправить", вы увидите следующее для каждой из ваших меток ошибок:
<label class="error"></label>
<small class="error"></small>
Один добавлен вами изначально, а другой добавлен динамически после нажатия кнопки отправки. Счет 8 правилен.
Вы можете просто хотеть считать label.error
поскольку это похоже на то, что вы пытаетесь подсчитать.
Вы можете считать только видимые метки ошибок с помощью видимого селектора, например:
$('small.error:visible').length