title: How to do this the with Jquery instead of javascript
body: <p>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</p>
  
  <p>What's the jQuery way?</p>
  
  <pre><code>//Set some variables
          var invalidFields = $(form).querySelectorAll(':invalid'),
          errorMessages = $(form).querySelectorAll('.error-message'),
          parent;
  
          // Remove any existing messages
          for (var i = 0; i &lt; 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 &lt; fields.length; i++) {
              var message = $(fields[i]).attr('data-ErrorMessage');
              $(fields[i]).get(0).setCustomValidity(message);
          }
  
          //Display custom messages
          for (var i = 0; i &lt; invalidFields.length; i++) {
              parent = invalidFields[i].parentNode;
              parent.insertAdjacentHTML('beforeend', '&lt;div class='error-message'&gt;' +
                  invalidFields[i].validationMessage +
                  "&lt;/div&gt;");
          }
  </code></pre>