Wie man dies mit Jquery anstelle von Javascript

Question

Ich habe versucht, diesen Abschnitt des Skripts in jQuery anstelle von Vanille Javascript zu konvertieren, aber ich bin mir nicht sicher, wie man die Elemente mit jQuery durchlaufen. Im Grunde nehme ich einen Datenattr-Wert von jedem Feld, um als eine Fehlermeldung verwendet zu werden, die nahe dem Feld angezeigt wird. Dies ist alles in einem Klick-Ereignis auf der Schaltfläche zum Senden, FYI

Was ist der jQuery Weg?

//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

ich Ihren Code einer Eins-zu-Eins-zu jQuery umgewandelt. Aber es könnte andere Wege geben, wenn ich weiß, wo form, setCustomValidity und validationMessage herkommt.

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

Sie können dies einfach ersetzen.

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); 
} 

mit jQuery Weg ersetzen

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