JQuery Check if input is empty not checking onload?

Question

I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.

It's does what it should but I also want it to check the status when the page loads.

Here is the current code:

$('#myID').on('keyup keydown keypress change paste', function() {
  if ($(this).val() == '') {
    $('#status').removeClass('required_ok').addClass('ok');
  } else {
    $('#status').addClass('required_ok').removeClass('not_ok');
  }
});

Rich O'Kelly · Accepted Answer · 2012-01-16 10:13:43Z

6

Try the following:

$(function() {
  var element = $('#myID');
  var toggleClasses = function() {
    if (element.val() == '') {
      $('#status').removeClass('required_ok').addClass('ok');
    } else {
      $('#status').addClass('required_ok').removeClass('not_ok');
    }
  };
  element.on('keyup keydown keypress change paste', function() {
    toggleClasses(); // Still toggles the classes on any of the above events
  });
  toggleClasses(); // and also on document ready
});

edited Jan 16, 2012 at 10:13

answered Jan 13, 2012 at 10:18

Rich O'Kelly

41.8k9 gold badges87 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

atmd Over a year ago

This is a much better way to do it then what I answered with

Anupam · Accepted Answer · 2012-01-13 10:20:16Z

3

The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler

$(document).ready(function(){
  $("#myID").trigger('keyup');
});

answered Jan 13, 2012 at 10:20

Anupam

8,0263 gold badges45 silver badges64 bronze badges

Comments

atmd · Accepted Answer · 2015-07-21 13:10:35Z

3

try checking the value on a doc ready:

$(function() {  
    if ($('#myID').val() == '') {
        $('#status').removeClass('required_ok').addClass('ok');
    } else {
        $('#status').addClass('required_ok').removeClass('not_ok');
    }
});

EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.

function check() {
    var $status = $('#status');

    if ($(this).val()) {
        $status.toggleClass('required_ok').toggleClass('ok');
    } else {
        $status.toggleClass('required_ok').toggleClass('not_ok');
    }
}


$(function () {
    $('#myID').on('keyup keydown keypress change paste', check);
    $('#myID').trigger('change');
});

edited Jul 21, 2015 at 13:10

answered Jan 13, 2012 at 10:18

atmd

7,5003 gold badges35 silver badges64 bronze badges

Comments

Hannes · Accepted Answer · 2012-01-13 10:18:04Z

2

Well then why dont just check the field after the page is loaded?

$(document).ready(function(){
  if ($('#myID').val() == '') {
    $('#status').removeClass('required_ok').addClass('ok');
  } else {
    $('#status').addClass('required_ok').removeClass('not_ok');
  }
});

answered Jan 13, 2012 at 10:18

Hannes

8,2575 gold badges35 silver badges51 bronze badges

Comments

arun · Accepted Answer · 2012-01-13 10:32:00Z

2

$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

answered Jan 13, 2012 at 10:32

arun

211 bronze badge

Collectives™ on Stack Overflow

JQuery Check if input is empty not checking onload?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related