javascript - jQuery if hasClass hide element on blur -

i have form displays error message in html label when users don't enter valid data form fields. label displays beneath form field onblur , stays there until data entered form field. label show when users click form field instead of showing persistently. below script i'm attempting hide error label user tabs out of form field. figured i'd worry making appear again once can hide it.

here html:

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

and script

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

you need pass function .blur() function callback, this:

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

note doing .field label selector within context of parent() of $(this). $(this) refer #firstname, if parent, can select within node tree , not accidentally other .field label in page.