This is the fiddle /

I want to show that div error if the textbox content's length greater than 3 then show that div with error as wrong format

and when textbox is not getting entered or out of focus , div error should go out

HTML

<div id="errorholder">
</div>
<br />
<input id="txtbox" type="text">

JS

$('#txtbox').onchange(function(e) 
{
if($(this).length >3)
$('#errorholder').text("wrong format");

});

$('#txtbox').focusout(function(e) 
{
$('#errorholder').text("");

});

how to write these two function ?

This is the fiddle https://jsfiddle/or0db22d/

I want to show that div error if the textbox content's length greater than 3 then show that div with error as wrong format

and when textbox is not getting entered or out of focus , div error should go out

HTML

<div id="errorholder">
</div>
<br />
<input id="txtbox" type="text">

JS

$('#txtbox').onchange(function(e) 
{
if($(this).length >3)
$('#errorholder').text("wrong format");

});

$('#txtbox').focusout(function(e) 
{
$('#errorholder').text("");

});

how to write these two function ?

• javascript
• jquery
• html
• css

• I think you want to use $.on('change'), $(this).val().length and $.on('focusout') jsfiddle/or0db22d/1 – Michael Coker Commented May 19, 2017 at 3:29

3 Answers 3

$('#txtbox').on('input', function(e) {
  if ($(this).val().length > 3)
    $('#errorholder').text("wrong format");
  else
    $('#errorholder').text("");
});

//$('#txtbox').focusout(function(e) {
//  $('#errorholder').text("");

//});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="errorholder">
</div>
<br />
<input id="txtbox" type="text">

1. Use on input event
2. get the input value using .val()

Change our JS code to

$('input').on('keyup',function(){
      if($(this).val().length > 3)
      $('#errorholder').text("wrong format");
});

Try this. You have to use keyup event. Change event will listen only you focus out on text box. To find the length of text box you have to use $(this).val().length

$('#txtbox').keyup(function(e) 
{
  if($(this).val().length >3){
    $('#errorholder').text("wrong format");
  }
});

$('#txtbox').focusout(function(e) 
{
$('#errorholder').text("");

});

here updated jsfiddle, https://jsfiddle/or0db22d/4/