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