Question

I’ve got a jQuery validation function that adds classes and changes some informational text on blur. The .addClass and .removeClass methods are working fine but .text does not. I have a feeling that I’m missing something simple and fundamental but my poor JavaScript knowledge might be a hindrance. Thanks to anyone who can help!

$(document).ready(function(){
  $('.required-text').on('blur', function() {
    $(this).removeClass('error');
    if($.trim(this.value).length < 1) {
      $(this).addClass('error');
      var fieldText = "#" + this.id + "_info";
      $(fieldText).removeClass('forminfo');
      $(fieldText).addClass('forminfo_error');
      $(fieldText).text = "This field is required.";
    }
  }
});

<input type="text" name="first_name" id="first_name" value="" class="form-text required-text">
<span id="first_name_info" class="forminfo">Required</span>   

Answer 1

try $(fieldText).text("This field is required."); instead

see documentation about text(): http://api.jquery.com/text/