JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="id_1" data-id="1" value="0"><br>
<input type="text" id="id_2" data-id="2" value="0"><br>
<input type="text" id="id_3" data-id="3" value="0"><br>
<input type="text" id="id_4" data-id="4" value="0"><br>
<input type="text" id="id_5" data-id="5" value="0"><br>
JavaScript
$(function() {
var error = false;
$('input').live('keydown', function(e) {
switch(e.keyCode)
{
case 13:
alert('enter!');
var next_input = $('#id_' + ($(this).data('id')*1 + 1));
check($(this));
if(error) {
$(this).focus();
} else {
if($(next_input).length) {
$(next_input).focus();
}
}
e.preventDefault();
e.stopPropagation();
break;
}
})
.live('blur', function() {
check($(this));
if(error) {
$(this).focus();
alert('blur!');
return false;
}
});
function check(inp) {
if(!/^\d+$/.test(inp.val()) && !error) {
alert('Bad Value!');
error = true;
} else {
error = false;
}
};
});