Jquery validate não está sendo acionado para o campo day? - javascript, jquery

Eu tenho este script e seu acionamento apenas quando clico pela primeira vez na caixa de texto:

var day = parseInt($("#day_birthdate").val(), 10);
jQuery("input#day_birthdate").bind("input propertychange", function () {
if (day >= 1 || day <=31) {
jQuery(this).css({ "background": "green" });


} else {
jQuery(this).css({ "background": "red" });

}
});

Eu tenho esta caixa de texto:

@Html.TextBoxFor(m => m.Register.Day, new { id = "day_birthdate", @class = "form-control", mask = "99", @placeholder = "dd" })

Quando eu clico na caixa de texto, é acionado, mas poro valor da primeira vez é NaN e seu vermelho, mas quando eu coloco um número, ele não está mais acionando ... então eu preciso mudar isso de alguma forma para quando o usuário digitar números entre 1 e 31 para obter a caixa de texto verde. Alguma ajuda?

Respostas:

jQuery("input#day_birthdate").bind("input propertychange", function () {
var day = parseInt($("#day_birthdate").val(), 10); //Getting the value after change

if (day >= 1 && day <= 31) { // Changed || to && because both must be true
jQuery(this).css({
"background": "green"
});
} else {
jQuery(this).css({
"background": "red"
});
}
});

Violino

Você tem que se mudar day atribuição ao corpo do evento, porque este código:

var day = parseInt($("#day_birthdate").val(), 10);
jQuery("input#day_birthdate").bind("input propertychange", function () {
if (day >= 1 || day <=31) {

está obtendo valor no carregamento da página e apenas comparando valores quando você digita no campo. Mover var day = ... para o corpo do evento:

jQuery("#day_birthdate").bind("input propertychange", function () {
var day = parseInt($("#day_birthdate").val(), 10);

if (day >= 1 || day <=31) {

você deve obter o valor de entrada no evento.

var day = "";
jQuery("input#day_birthdate").bind("input propertychange", function () {
day = parseInt($("#day_birthdate").val(), 10);
if (day >= 1 || day <=31) {
jQuery(this).css({ "background": "green" });
} else {
jQuery(this).css({ "background": "red" });

}
});