Блог

У меня есть параметр с именем foo . Я использую API для отправки вызова конечной точке, которая в случае успеха затем заполнится foo соответствующими данными полезной нагрузки. foo имеет много свойств, таких как:

• Название
• forename
• фамилия
• Абракадабра

Что я хочу сделать с помощью jQuery, так это после того, как все эти свойства будут заполнены, я затем хочу просмотреть их все и проверить, не заполнены ли эти свойства или имеют длину, равную нулю. Если это так, то я хочу показать класс errorMesssage , но только для этого конкретного свойства.

Это текущий код, который я использую для отображения своих элементов:

 function createApplicationVerification1(customerData) {
    var customerOne =
        "<div class='row'><strong>Person 1:</strong></div><br />"  
        "<div class='row validation-row'>"  
        "<div class='col-md-6'><span>Title</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.p1Title)  
        "</span></div>"  
        "<div class='col-md-1'>"  
        validateField(customerData.p1Title)  
        "</div>"  
        "</div>"  
        "<div class='row validation-row'>"  
        "<div class='col-md-6'><span>Forename</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.p1Forename)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.p1Forename)  
        "</span></div>"  
        "</div>"  
        "<div class='row errorRow'><div class='col-md-6'> </div><div class='col-md-6 errorMessage'></div></div>"  
        "<div class='row validation-row'>"  
        "<div class='col-md-6'><span>Surname</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.p1Surname)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.p1Surname)  
        "</span></div>"  
        "</div>"  
        "<div class='row validation-row'>"  
        "<div class='col-md-6'><span>DOB</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.p1Dob.substring(0, 10))  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.p1Dob)  
        "</span></div>"  
        "</div>"  
        "<div class = 'row validation-row'>"  
        "<div class='col-md-6'><span>Address</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.app1Address)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.app1Address)  
        "</span></div>"  
        "</div>"  
        "<div class = 'row validation-row'>"  
        "<div class='col-md-6'><span>Town</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.app1Town)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.app1Town)  
        "</span></div>"  
        "</div>"  
        "<div class = 'row validation-row'>"  
        "<div class='col-md-6'><span>Postcode</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.app1Postcode)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.app1Postcode)  
        "</span></div>"  
        "</div>"  
        "<div class = 'row validation-row'>"  
        "<div class='col-md-6'><span>Country Code</span></div>"  
        "<div class='col-md-5' id ='applicantInfo'><span>"  
        checkIfEmpty(customerData.countryCode)  
        "</span></div>"  
        "<div class='col-md-1'><span>"  
        validateField(customerData.countryCode)  
        "</span></div>"  
        "</div>";

    return customerOne;
}
  

После заполнения этих данных я вызываю checkForErrors() функцию, которая является:

 function checkForErrors() {
    $(foo.childNodes).each(function () {
        $(foo).filter(function () {
            return $(foo, this).length == 0;
        });
        $(".errorMessage").text("Required Field.");
        $(".errorMessage").css("display", true);
    });
}
  

Я думаю, что для каждого, foo.childNodes если он соответствует фильтру, где длина равна 0, я хочу, чтобы он показывал errorMessage .

При этом я столкнулся с 2 проблемами.

1. childNodes выдает ошибку и прерывает работу js.
2. Поскольку имя класса не уникально, как только я получаю одно свойство, которое соответствует правилу 0 по длине, оно показывает сообщение об ошибке для всех свойств.

Изображение ниже — грубый пример того, чего я пытаюсь достичь:

Вот что я сейчас получаю:

Я получаю это из-за того, что класс для этого html-элемента везде одинаков.

Как я могу выполнить проверку проверки лучшим способом, чем определять идентификатор каждого errorMessage ?

Вы должны структурировать свой код в соответствии со стандартами.

Не повторяйте. Создайте функцию:

 function createItem(title, value = "") {
  var isValid = validateField(value); //not sure what you have in mind with that function but
  //you should create dom elements https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
  return "<div class='row validation-row'>"  
         "<div class='col-md-6'><span>"   title   "</span></div>"  
         "<div class='col-md-5' id ='applicantInfo'>"   value   "<span>"  
         "<div class='col-md-1'><span>"  
         (isValid ? "<span>Y</span>" : "<span>X</span>")  
         "</span></div>"  
         "<div>"   (value.length === 0 ? "" : "<span>Required Field.</span>")   "</div>"  
         "</div>";
}
  

вызовите эту функцию с вашими данными.

 function createApplicationVerification1(customerData) {
   var r = "<div class='row'><strong>Person 1:</strong></div><br />";
   r  = createItem('Title', customerData.p1Title);
   r  = createItem('Forename', customerData.p1Forename);
   // ...
   return r   "</div>";
}
  

Вам вообще не нужен checkForErrors. Не выполняйте итерацию по dom-узлам, просто делайте это во время создания своих dom-узлов.