2015-01-11 5 views
0

다음 코드가 있습니다.jquery를 사용하여 레이블을 표시하거나 숨기는 방법

<div class="form-group"> 
      <label class="col-sm-2 control-label labelfont">FIRST NAME:</label> 
      <div class="col-sm-6"> 
       <input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName"> 
      </div> 
      <label class="col-sm-2 labelfont errorMsg" id="Err_FirstName">Enter the first name</label> 
     </div> 

는 처음 "Err_FirstName" 입력 필드가 tabout에 비어 hidden.If, 나는 error label를 표시 할 수 있습니다.

나는 blur 이벤트에 다음 코드를 작성했습니다.

$("#FirstName").on("blur", function() { 
    if ($(this).val().trim().length == 0) { 
     $("#Err_FirstName").show(); 
    } 
    else { 
     $("#Err_FirstName").hide(); 
    } 
}); 

'errormsg' 클래스는 경우에 내가 뭔가 잘못하고있는 중이 야, 라벨이 tabout.Could에 표시 점점되지

.errorMsg { 
    display:none;   
    color:Red; 
} 

사람이 올바른 방향으로 날 지점으로 정의된다.

+1

나를 위해 작동합니다. http://jsfiddle.net/7sb76fqw/ – TreeTree

+0

완벽하게 정상적으로 작동합니다. [JSFiddle] (http://jsfiddle.net/tfqmr0ty/). 당신의 문제는 무엇입니까? –

+0

IE에서 테스트하는 경우 사용중인 jQuery 버전을 기반으로 한 인터넷 익스플로러 문제 일 수 있습니다. - http://api.jquery.com/blur/ –

답변

2

코드가 완벽하게 작동합니다. JSFiddle.

$("#FirstName").on("blur", function() { 
 
    if ($(this).val().trim().length == 0) { 
 
     $("#Err_FirstName").show(); 
 
    } 
 
    else { 
 
     $("#Err_FirstName").hide(); 
 
    } 
 
});
.errorMsg { 
 
    display:none;   
 
    color:Red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
      <label class="col-sm-2 control-label labelfont">FIRST NAME:</label> 
 
      <div class="col-sm-6"> 
 
       <input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName"> 
 
      </div> 
 
      <label class="col-sm-2 labelfont errorMsg" id="Err_FirstName">Enter the first name</label> 
 
     </div>

당신은 내가이 다른 클래스를 가지고있다 할 및 클래스 이름을 변경 jQuery를 1.9.1 국지적 인 모범 사례를 사용하고이 코드 .FOR 사용하는 jQuery를 버전을 확인하는 가치가있을 수 있습니다 FirstName에 값이없는 경우.

관련 문제