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 span放在input元素之后，因此您需要查找兄弟。您可以使用.next()。

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

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

1 个答案: