onchange and focus out event on a text box with jquery

Question

This is the fiddle https://jsfiddle.net/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 ?

Answer 1

 $('#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.com/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()

Answer 2

Change our JS code to

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

Answer 3

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.net/or0db22d/4/