Missy Bur Missy Bur - 8 months ago 88
CoffeeScript Question

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

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

What I would like span message to display

<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;
}

Answer Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download