If input box goes over character limit, have span tag message display

Question

I have a Headline input box that has a limit of 3 characters for the user to type in. After the user has reached the limit of 3 characters and is no longer able to type, I would like the span message listed below to display in red, "Headline must be under 3 characters."

Via a CoffeeScript function, I am trying to add a class on change that should display the span message below in red; however it is not working. I have provided a Fiddle for this issue. In addition, I have displayed an image of what I would like my function to display. If anyone can help I would really appreciate it!

Fiddle

<label htmlFor="request[title]">Headline</label>

        <input name="request[title]" id="headline_input" onChange= "headline_input_max" maxLength="3" type="text"

               placeholder="Give your request a title"

               required />

        <span id="title_over_limit_text">Headline must be under 3 characters.</span>



 $ ->

  $('#headline_input').change ->

    if $(this).val().length > 3

        $('#title_over_limit_text').addClass('title_over_limit_text_display')





#title_over_limit_text {

  display: none;

}



.title_over_limit_text_display {

  color: red;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

DO this below : If it doesn't work call my attention.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <input name="requesttitle" id="headline_input" onkeyup="seee()" type="text" placeholder="Give your request a title" required />
        <span id="title_over_limit_text" style="display:none;">Headline must be under 3 characters.</span>

       <script>
        function seee(){
   var textval = $("#headline_input").val().length;
  //  alert (textval); to see count of the text number
    if (textval > 3){
      $("#title_over_limit_text").show();
      //if maybe you want to run ajax request here you can do that.
      return false;
     } else {
     $("#title_over_limit_text").hide();
     return false;
   }
   }
       </script> 

#title_over_limit_text {
  display: none;
}

.title_over_limit_text_display {
  color: red;
}

If input box goes over character limit, have span tag message display

Sign up