JQuery Compruebe si la entrada está vacía, no verificando la carga?

Question

Estoy usando este código para verificar si una casilla de entrada está vacía o no y funciona bien, pero solo comprueba si una tecla no está presionada cuando se carga la página.

Hace lo que debería pero también quiero que verifique el estado cuando se carga la página.

Aquí está el código actual:

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

Answer 1

intente lo siguiente:

$(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 
}); 

Answer 2

Bueno, entonces ¿por qué no acaba de comprobar el campo después de cargar la página?

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

Answer 3

trata de leer el valor de un documento listo:

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

EDITAR: así como una actualización a esta respuesta, un enfoque mejor podría ser el uso de la clase de palanca, establecido en el documento listo, entonces el gatillo el evento para ejecutar en la carga de la página.

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'); 
}); 

Answer 4

La forma más sencilla de hacer es activar cualquiera de los keyup, etc keydown evento al cargar la página. A continuación, se llamará automáticamente a su controlador específico

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

Answer 5

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