У меня есть этот HTML:
<fieldset style="display: block;" title="Producto" class="fstep" id="product-create-step-2">
<section>
<div class="p_name">
<input type="text" maxlength="50" required="required" name="product[name]" id="product_name">
</div>
<div class="p_description">
<textarea required="required" name="product[description]" id="product_description"></textarea>
</div>
<div class="p_age">
<input type="text" value="0" name="product[age_limit]" id="product_age_limit">
</div>
</section>
</fieldset>
И я пытаюсь показать предупреждение для каждого элемента с required="required"
с пустыми значениями, поэтому я сделал следующее:
$('#product-create-step-2 > input[required="required"]').each(function() {
if (!$.trim(this.value).length) {
alert($(this).prev('label').text() + ' can't be empty!!!');
valid = false;
}
});
Если я оставляю #product_name
или #product_description
пустым, он никогда не показывает предупреждение, и я не могу найти то, что я пропустил, какие-либо советы?
>
для выбора прямых потомков.
Вы хотите это вместо этого:
$('#product-create-step-2 input[required="required"]')
Который найдет все соответствующие входы внутри #product-create-step-2
, независимо от того, насколько глубоко он вложен.
Кроме того, это приведет к синтаксической ошибке:
' can't be empty!!!'
Вам нужно избежать одиночной цитаты или переключить свои цитаты:
' can\'t be empty!!!'
или (мои предпочтения):
"can't be empty"
Ваши элементы не являются прямыми детьми #product-create-step-2
поэтому вы не должны включать >
. Просто у вас есть пробел между двумя селекторами, и вы получите все элементы в пределах #product-create-step-2
.
$('#product-create-step-2 input[required="required"]')
У вас нет входных данных непосредственно под первым селектором.
Попробуйте изменить селектор на:
$('#product-create-step-2 > section > div > input[required="required"]')
Или даже просто
$('#product-create-step-2 input[required="required"]')
Нет, посмотрите на DOM более внимательно, запрос должен быть:
$('#product-create-step-2 input[required="required"]').each ...
или:
$('#product-create-step-2 > section > div > input[required="required"]').each ...
поскольку >
выбирает элементы, которые являются прямыми дочерними элементами родителя.
textarea
в том же селекторе?:input
селектор , который "в основном выбирает все элементы управления формы".