2015-05-21 2 views
0

я в настоящее время, с проблемой выбора правильного элемента на формеJQuery выбора только элемент внутри одного выбранного

Вот мой код:

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

В принципе, я хочу, чтобы проверить, на unfocus , если то, что пользователь вводит, подходит для пары полей внутри формы, иначе появляется сообщение об ошибке. К сожалению, я не могу удалить сообщение об ошибке, и этот код завершает это сообщение в первом поле, которое пользователь вводит неправильно. После этого он не оторвется, даже если вход, введенный после первой нефокусировки, удовлетворяет условиям.

Я тестирую простую форму с 2 текстовыми вводами и 1 отправкой. Без удаления части, я могу видеть оба сообщения отображаются и на

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

Это второй элемент, который застревает с сообщением об ошибке.

+1

В обработчике размытости, '$ ('errorName.) Длина == 0', вероятно, следует' $ (это) .find длина == 0 '. (' ErrorName.). - это проверка имеет ли поле * any * сообщение об ошибке, вместо проверки поля, на которое вы смотрите. –

+0

Элементы ввода не имеют дочерних элементов, поэтому '$ (this) .find ('. ErrorName')' гарантированно ничего не найдет. –

ответ

1

Вы размещаете пробел errorName после элемента ввода, поэтому вам нужно искать родного брата. Вы можете использовать для этого .next().

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

Спасибо за быстрый ответ. Мне также пришлось изменить условие на next(), потому что тогда сообщения об ошибках будут сохраняться при укладке, если я все еще использую. –

Смежные вопросы