CODEWITHSUNDEEP
jquerygoogle-chromefocusout
Vinod VT
Vinod VT

Reputation: 7149

Jquery focusout validation is not working properly in chrome browser

I am using jquery focusout event. I firefox its working perfectly. The issue is that (In chrome) When I click on the textbox I am unable to select the another textbox without giving any input. But It can in firefox.

HTML

<input type="text" id="first_name">
<div  id="error-firstname"></div>
<input type="text" id="last_name">
<div  id="error-lastname"></div>

Jquery

$('#first_name').on('focusout',function(){
  if($('#first_name').val()==''){
    $('#error-firstname').html('Please enter your first name.');
    $('#first_name').focus();
    return false;
  }else{
    $('#error-firstname').html('');
    return true;
  }
});
$('#last_name').on('focusout',function(){
  if($('#last_name').val()==''){
    $('#error-lastname').html('Please enter your last name.');
    $('#last_name').focus();
    return false;
  }else{
    $('#error-lastname').html('');
    return true;
  }
});

We can see the difference when run this code in both firefox and chrome.

Jsfiddle

How to make this run in chrome ?

Upvotes: 0

Views: 3519

Answers (1)

ryudice
ryudice

Reputation: 37366

Shouldnt you be using 'blur' instead of 'focusout'? I'm not sure that even exists.

See here http://jsfiddle.net/ebd36j1p/, just remove the focus inside the blur event handler.

$('#first_name').on('blur',function(){
      if($('#first_name').val()==''){
        $('#error-firstname').html('Please enter your first name.');
      //  $('#first_name').focus();
        return false;
      }else{
        $('#error-firstname').html('');
        return true;
      }
    });
    $('#last_name').on('blur',function(){
      if($('#last_name').val()==''){
        $('#error-lastname').html('Please enter your last name.');
       // $('#last_name').focus();
        return false;
      }else{
        $('#error-lastname').html('');
        return true;
      }
    });

Upvotes: 1

Related Questions