Как сделать это с помощью JQuery вместо javascript

Question

Я пытаюсь преобразовать этот раздел скрипта в jQuery вместо javascript, но я не уверен, как прокручивать элементы с помощью jQuery. В принципе, я захватываю значение attr данных из каждого поля, которое будет использоваться как сообщение об ошибке, которое отображается рядом с полем. Это все внутри события щелчка на кнопке отправки, FYI

Что такое jQuery?

//Set some variables 
     var invalidFields = $(form).querySelectorAll(':invalid'), 
     errorMessages = $(form).querySelectorAll('.error-message'), 
     parent; 

     // Remove any existing messages 
     for (var i = 0; i < errorMessages.length; i++) { 
      errorMessages[i].parentNode.removeChild(errorMessages[i]); 
     } 

     //Get custom messages from HTML data attribute for each invalid field 
     var fields = form.querySelectorAll('.sdForm-input'); 
     for (var i = 0; i < fields.length; i++) { 
      var message = $(fields[i]).attr('data-ErrorMessage'); 
      $(fields[i]).get(0).setCustomValidity(message); 
     } 

     //Display custom messages 
     for (var i = 0; i < invalidFields.length; i++) { 
      parent = invalidFields[i].parentNode; 
      parent.insertAdjacentHTML('beforeend', '<div class='error-message'>' + 
       invalidFields[i].validationMessage + 
       "</div>"); 
     } 

Answer 1

я преобразовал свой код один-к-одному для JQuery. Но могут быть и другие способы, когда я буду знать, откуда form, setCustomValidity и validationMessage.

var $form = $(form); 

// Remove any existing messages 
$(".error-message", $form).remove(); 

// Get custom messages from HTML data attribute for each invalid field 
$(".sdForm-input", $form).each(function() { 
    var message = $(this).attr('data-ErrorMessage'); 

    // i don't know where the 'setCustomValidity' function is coming from 
    // this is a custom function 
    $(this)[0].setCustomValidity(message); 
}); 

// Display custom messages 
$(":invalid", $form).each(function() { 
    // i don't know where 'validationMessage' is comig from 
    // this is a custom property 
    $(this).parent().append("<div class='error-message'>" + $(this)[0].validationMessage + "</div>"); 
}); 

Answer 2

Вы можете просто заменить это.

var fields = form.querySelectorAll('.sdForm-input'); 
for (var i = 0; i < fields.length; i++) { 
    var message = $(fields[i]).attr('data-ErrorMessage'); 
    $(fields[i]).get(0).setCustomValidity(message); 
} 

Заменить JQuery образом

var fields = form.find('.sdForm-input'); 
$.each(fields, function(index, el){ 
    var message = $(el).attr('data-ErrorMessage'); 
    $(el).setCustomValidity(message); 
});