Получение правильных ссылок на объекты в jQuery для проверки работоспособности

Question

У меня есть форма в моей админ-панели, и у меня возникли проблемы с ссылками в jQuery.

Код формы выглядит так:

<div class="full-width">
    <label for="file_name-644" >File Name</label> 
    <span class="relative"><input type="text" name="file_name-644" id="file_name-644" class="full-width" disabled="disabled" value="pic.jpg"/><span ></span></span>
</div>
<div class="full-width">
    <label for="name-644" class="required">Name</label> 
    <span class="relative"><input type="text" name="name-644" id="name" value="" class="full-width name"/><span ></span></span>
</div>

Теперь, поскольку в этой форме может обрабатываться несколько записей одновременно, номера будут меняться в ссылках (например, с 644 до 108). Это создается с помощью цикла php.

В jquery я использую цикл .each(), чтобы проверить, что значения заполнены. Прямо сейчас все, что мне нужно для проверки, это непустые поля для имени. В настоящее время это выглядит так:

$('.name').each(function(index) {
    if(!$(this).val()){ctr++;}else{error++;}
});

Переменные ctr и error являются счетчиками, которые я позже использую, чтобы указать на ошибки или количество записей, готовых для обработки.

Что я хочу добавить к этому, так это изменить метку только для пустых записей, чтобы они выделялись. Я знаю, что могу изменить их все с помощью
$('.required').css({'color': '#AB1414'}); но как я могу сделать это в цикле .each() выше и только для пустых значений?

Заранее спасибо!

Answer 1

Чтобы использовать цикл .each() в своем коде, вы можете сделать следующее.Обратите внимание, что он использует jQuery.trim() ^{(документы)} , чтобы считать значения только пустым пространством пустыми.

Использование prev() ^{(документы)} он также получает предыдущие <label> своих parent() ^{(документы)} , но только , если он имеет класс required.Затем в if() проверяется свойство length ^(docs) объекта <label>, чтобы узнать, действительно ли было required этикетка.

$('.name').each(function(index) {
    var $th = $(this);
    if( $th.parent().prev('.required').length && !$.trim( $th.val() ) ){ctr++;}else{error++;}
});

Answer 2

Возможно попробуйте это для HTML:

<div class="full-width nameContainer">
    <label for="name-644" class="required">Name</label> 
    <span class="relative"><input type="text" name="name-644" id="name" value="" class="full-width name"/><span ></span></span>
</div>

А для JS:

$('.nameContainer').each(function(index) {
    var value = $(".name", this).val();
    if(!value)
    {
      $('.required', this).css({'color': '#AB1414'});
      ctr++;
    }
    else
    {
      error++;
    }
});

Answer 3

Вам нужно добавить обязательный класс для полей ввода, а не span, и использовать этот код при проверке

 $('.required').each(function(){
       if ($(this).val() == '') $(this).css({'color': '#AB1414'});
    });