How to do this the with Jquery instead of javascript

Question

I've been trying to convert this section of script to jQuery instead of vanilla javascript, but I'm not sure how to loop through the elements with jQuery. Basically, I'm grabbing a data attr value from each field to be used as an error message that displays near the field. This is all inside a click event on the submit button, FYI

What's the jQuery way?

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

Look at jQuery documentation: http://api.jquery.com/jquery.each/ — David T. Macknet, Jul 22 '16 at 21:31

score 1 · Answer 1 · edited Jul 22 '16 at 21:41

You can simple replace this.

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

Replace with jQuery way

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

eisbehr · Accepted Answer · 2016-07-22T21:54:07.417

I converted your code one-to-one to jQuery. But there might be other ways, when i will know where form, setCustomValidity and validationMessage is coming from.

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

Thank you. FYI: https://html.spec.whatwg.org/multipage/forms.html#dom-cva-setcustomvalidity — Eckstein, Jul 22 '16 at 22:13

How to do this the with Jquery instead of javascript

2 Answers2