javascriptの代わりにJqueryを使用する方法

Question

私はこのセクションをvanilla javascriptではなくjQueryに変換しようとしていましたが、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

と交換私は、1対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); 
});