javascript - JQuery 仅选择所选元素内的元素

Question

我目前在选择表单上的正确元素时遇到问题

这是我的代码:

$(document).ready(function(){
    $(".wpcf7-submit").click(function () {
        if($('.errorName').length > 0){
            return false;
        }
    });

    var selectorArray = [$('input[name="name"]'), $('input[name="Company"]')];
    $.each(selectorArray, function(){
      $(this).on('blur',function(){
        if($('.errorName').length == 0 && (($(this).val().length < 4  && $(this).val().length != 0) || /^[a-zA-Z0-9- ]*$/.test($(this).val()) == false))
        {
            $(this).after('<span class="wpcf7-not-valid-tip errorName" role="alert">Field is not right.</span>');
        }
        else
        {           
            if($(this).val().length > 3 && /^[a-zA-Z0-9- ]*$/.test($(this).val()) == true) 
            { 
               $(this).find('.errorName').remove();
            }
        }
      });
    });
});

基本上，我想在失去焦点时检查用户输入的内容是否适合表单内的几个字段，否则会出现错误消息。不幸的是，我似乎无法删除错误消息，并且此代码将该消息粘贴在用户输入错误的第一个字段上。之后，即使第一次失焦后输入的内容满足条件，也不会脱落。

我正在测试一个带有 2 个文本输入和 1 个提交的简单表单。如果没有删除部分，我可以看到两条消息都显示在

$(this).find('errorName').first().remove();

这是第二个被错误消息卡住的元素。

Answer 1

您将 errorName 范围放置在输入元素之后，因此您需要寻找同级元素。您可以使用.next()为此。

$(this).next('.errorName').remove();