CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shaswatatripathy
shaswatatripathy

Reputation: 171

onchange and focus out event on a text box with jquery

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 ?

Upvotes: 0

Views: 9604

Answers (3)

Ananth A
Ananth A

Reputation: 331

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/

Upvotes: 0

Jonas T
Jonas T

Reputation: 3077

Change our JS code to

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

Upvotes: 0

guradio
guradio

Reputation: 15555

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

Upvotes: 3

Related Questions