如何使用 Jquery 而不是 javascript 来做到这一点

Question

我一直在尝试将这部分脚本转换为 jQuery 而不是 vanilla javascript，但我不确定如何使用 jQuery 循环遍历元素。基本上，我从每个字段中获取一个数据属性值，用作在字段附近显示的错误消息。 这一切都在提交按钮上的点击事件中，仅供参考

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

您可以简单地替换它。

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

Answer 2

我将您的代码一对一地转换为 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>");
});