Предупреждение, когда текстовое поле осталось пустым

Question

Четыре текстовых поля находятся на странице JSP. После ввода первого текстового поля, когда я нажимаю Вкладка, фокус перемещается во второе текстовое поле. Точно так же фокус будет сделан на 3-м и 4-м текстовом поле после нажатия Вкладка неоднократно.

<input type="text" id="textbox1"/> 
<input type="text" id="textbox2"/> 
<input type="text" id="textbox3"/> 
<input type="text" id="textbox4"/> 

Если я перехожу от первого к коробке третьего текста без заполнения второго текстового поля, то я хочу, чтобы иметь тревогу прийти как «второе текстовое поле не может быть пустым». Точно так же после ввода данных сначала, во-вторых, если я перехожу к четвертому текстовому полю без заполнения третьего текстового поля, тогда я хочу, чтобы предупреждение было как «3-е текстовое поле не может быть пустым». И после предупреждения фокус должен быть снова на этом пустом текстовом поле, фокус не должен двигаться дальше. Как я могу это сделать?

Answer 1

Вы отметили вопрос с помощью jQuery, поэтому я дам вам решение jQuery. Вы можете захотеть сделать селектор немного более конкретным, в зависимости от вашего HTML:

$("input").blur(function() { 
    if(!this.value) { 
     alert("Text box " + ($(this).index() + 1) + " cannot be empty."); 
     this.focus(); //Keep focus on this input 
    } 
}); 

Это связывает обработчик события к blur событию элементов (которые пожары, когда поле теряет фокус, будь то через вкладку прижима , щелчок в другом месте или любой другой способ изменения фокуса). Обработчик события проверяет, имеет ли поле значение, и если оно не оповещает сообщение, используя метод jQuery index, чтобы получить индекс элемента относительно его братьев и сестер.

Адрес working example.