Как динамически обновлять мой диапазон с сообщением об ошибке или сообщением об успешном завершении?

Question

Я пытаюсь динамически обновлять свой диапазон с сообщением об ошибке, если пользователь вводит символ и удаляет все введенные данные и нажимает на следующее поле или показывает успешное сообщение, как только пользователь перестанет печатать.

мой HTML:

Full name: 
<input type="text" id="box1" />&nbsp;<span id="msg_out1"></span> 

password: 
<input type="password" id="box2" />&nbsp;<span id="msg_out2"></span> 

Мой JQuery это, по крайней мере, это то, что я пробовал:

jQuery("#box1").click(function(){ 
    if (jQuery("#box1").val() !="") { 
     jQuery("#msg_out1").html('✓ Great Name!').css('color','green').css('font- size','18px').css('margin-left','40px'); 
    } else 
     jQuery("#msg_out1").html('✘ Please Enter Your Name').css('color','red').css('font-size','18px').css('margin-left','40px'); 
}); 

пример: twitter

Answer 1

Я думаю, что лучший способ сделать это заключается в использовании события «изменения» на входе.

Так бы сделать что-то вроде:

$('.my-input').on('change', function(event) { 
    /* validate if blank or something*/ 
}); 

И эта функция будет вызвана только тогда, когда этот вход теряет фокус.

Answer 2

Я решил проблему.

Правильная функция:

jQuery("#box2").on('keyup',function(event){ 
    if (jQuery("#box2").val() !="") { 
    jQuery("#msg_out2").html('✓ Great Name!').css('color','green').css('font-size','15px').css('margin-left','40px'); 
}else 
    jQuery("#msg_out2").html('✘ Please Enter Your Name').css('color','red').css('font-size','15px').css('margin-left','40px'); 

});