jQuery if hasClass hide element on blur

Question

У меня есть форма, отображающая сообщение об ошибке на метке HTML, когда пользователи не вводят действительные данные в поля формы. Метка отображается под полем формы onBlur и остается там до тех пор, пока данные не будут введены в поле формы. Я бы хотел, чтобы метка отображалась только тогда, когда пользователи нажимают обратно в поле формы, а не настойчиво. Ниже приведен сценарий, в котором я пытаюсь скрыть метку ошибки как пользовательские вкладки из поля формы. Я решил, что буду беспокоиться о том, чтобы снова появиться, как только я смогу скрыть это.

Вот HTML:

<div class="field"> 
    <input type="text" name="firstname" id="firstname" class="error has-error"> 
    <label for="firstname" class="error">First Name is required.</label> 
    </div> 

И сценарий

<script type="text/javascript"> 
    if($('.fieldset #firstname').hasClass('error')) { 
    $(this).blur($('.field label')).hide(); 
    } 
</script> 

Answer 1

Вам нужно передать функцию в функцию .blur() в качестве обратного вызова, что-то вроде этого:

$(".fieldset #firstname").blur(function(evt) { 
    if($(this).hasClass('error')) { 
     $(".field label", $(this).parent()).hide(); 
    } 
}); 

Обратите внимание, что я делаю селектор ярлыков .field в контексте parent() из $ (this). $ (this) будет ссылаться на #firstname, поэтому, если вы получите родителя, вы можете легко выбрать внутри этого дерева узлов и не случайно получить другую метку .field на своей странице.

Answer 2

Вам нужно установить условие if внутри обработчика размытия.

$('.fieldset #firstname').blur(function(){ 
    if ($(this).hasClass('error')){ 
     $('.field label')).hide(); 
    } 
})