i have 5 textbox like

<input type ="text" size="3" name="r"><br>
<input type ="text" size="3" id="1" onchange="vali(this.id)" name="I"><br>
<input type ="text" size="3" name="a"><br>
<input type ="text" size="3" name="s"><br>
<input type ="text" size="3"  name="e">
function vali(d){
if(document.getElementById(d).value <0 || document.getElementById(d).value >=30)}

I want user should enter only max 2 digits on each field between 0 & 30. I'm not able to restrict user to enter only 2 digits in field, for example when user enters 151, 15 should e on 1st field and then focus will go on 2nd field automatically and remaining digits will be entered in 2nd field and will be there till the user enters another digit. After entering focus will e on field 3 like this. Also I need to check to each field contain a number between 0 and 30 which I'm checking in above code. Also when user submit the form all field should be checked for value between (0 to 30) If there is any field present alert bos should pop up else go to next page.i m not able to do this part .this is my form part above the 5 input field

<form name="detail" action ="selectjzone.jsp" onsubmit="return validate(this)">

and edited part is

if (num < 0) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " " +  "is  outside the range0 to 30" );
return false;
} else if (num > 30) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " "+      "is  outside the range0 to 30" );
return false;
}
    return true;

}

i have 5 textbox like

<input type ="text" size="3" name="r"><br>
<input type ="text" size="3" id="1" onchange="vali(this.id)" name="I"><br>
<input type ="text" size="3" name="a"><br>
<input type ="text" size="3" name="s"><br>
<input type ="text" size="3"  name="e">
function vali(d){
if(document.getElementById(d).value <0 || document.getElementById(d).value >=30)}

I want user should enter only max 2 digits on each field between 0 & 30. I'm not able to restrict user to enter only 2 digits in field, for example when user enters 151, 15 should e on 1st field and then focus will go on 2nd field automatically and remaining digits will be entered in 2nd field and will be there till the user enters another digit. After entering focus will e on field 3 like this. Also I need to check to each field contain a number between 0 and 30 which I'm checking in above code. Also when user submit the form all field should be checked for value between (0 to 30) If there is any field present alert bos should pop up else go to next page.i m not able to do this part .this is my form part above the 5 input field

<form name="detail" action ="selectjzone.jsp" onsubmit="return validate(this)">

and edited part is

if (num < 0) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " " +  "is  outside the range0 to 30" );
return false;
} else if (num > 30) {
alert("The value enteres for " +" " + document.getElementById(obj.id).name + " "+      "is  outside the range0 to 30" );
return false;
}
    return true;

}

• javascript

• Can you use a javascript framework such as jquery or dojo or are you restricted to pure javascript ? – Philippe Commented Nov 9, 2011 at 16:15
• javascript as i dont know jquery or other – saum22 Commented Nov 9, 2011 at 16:19

4 Answers 4

Here's a start at how to validate the field and move any extra to the next field:

Working demo here: http://jsfiddle/jfriend00/vpTq5/

HTML:

<input id="a" type ="text" size="3" onkeyup="validate(this, 'b')" name="r"><br>
<input id="b" type ="text" size="3" onkeyup="validate(this, 'c')" name="I"><br>
<input id="c" type ="text" size="3" onkeyup="validate(this, 'd')" name="a"><br>
<input id="d" type ="text" size="3" onkeyup="validate(this, 'e')" name="s"><br>
<input id="e" type ="text" size="3" onkeyup="validate(this)" name="e">

Javascript:

function validate(obj, next) {
    // fetch value and remove any non-digits
    // you could write more code to prevent typing of non-digits
    var orig = obj.value;
    var mod = orig.replace(/\D/g, "");
    var nextObj;
    // check length and put excess in next field
    if (mod.length > 2) {
        // shorten the current value
        obj.value = mod.substring(0,2);
        if (next) {
            // put leftover into following value
            var nextObj = document.getElementById(next);
            if (!nextObj.value) {
                nextObj.value = mod.substring(2);
                nextObj.focus();
            }
        }
    } else {
        // only set this if necessary to prevent losing cursor position
        if (orig != mod) {
            obj.value = mod;
        }
    }
    // convert to number and check value of the number
    var num = Number(obj.value);

    // don't know what you want to do here if the two digit value is out of range
    if (num < 0) {
        obj.value = "0";
    } else if (num > 30) {
        obj.value = "30";
    }
}

Some notes:

1. Id values on HTML objects cannot start with a digit. They must start with a letter.
2. You will have to decide what behavior you want when a number greater than 30 is entered.
3. Keep in mind that input field values are strings. If you want to treat them like a number, you have to convert them to be numeric.
4. With more code, you can actually prevent the typing of non-numeric keys and you can move the focus before the 3rd value is typed.
5. There are ways to get data into fields that does not trigger onkeyup (copy/paste, drag/drop) so you will have to validate at other times too.
6. If you can use a framework like jQuery, this can be done in a simpler way.

Here is the code for automatic focusing on next field when you keep on typing,

you need to take of validating number between 0 & 30. Hope this helps,

<script>
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
function chkEvent(e){
    var keyCode = (isNN) ? e.which : e.keyCode;
    if(e.shiftKey==1 && keyCode == 9) return false;
    if(e.shiftKey==1 || keyCode == 9 || keyCode == 16) return false;
    return true;
}
function autoTab(current,to, e) {
    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
    if(current.getAttribute && current.value.length == current.getAttribute("maxlength") && !containsElement(filter,keyCode)) to.focus();
    function containsElement(arr, ele) {
        var found = false, index = 0;
        while(!found && index < arr.length) if(arr[index] == ele) found = true; else index++;
        return found;
    }
    return true;
}
</script>

<input type ="text" size="3" maxlength="2" name="r" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('1'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="1" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('a'), event);}" name="I"><br>
<input type ="text" size="3" maxlength="2" id="a" name="a" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('s'), event);}"><br>
<input type ="text" size="3" maxlength="2" id="s" name="s" onkeyup="if(chkEvent(event)){return autoTab(this, document.getElementById('e'), event);}"><br>
<input type ="text" size="3"  maxlength="2" id="e" name="e" >

Here is pure javascript solution is it like what you wanted at all?

http://jsfiddle/rfyC8/

Code:

var ieEvents = !!document.attachEvent,
    addEvent = ieEvents ? "attachEvent" : "addEventListener",
        keyUp = ieEvents ? "onkeyup" : "keyup";

function validator( e ) {
var sib, intValue, val = this.value;
    if( val.length >= 2 ) {

    intValue = parseInt( val, 10 );

        if( isNaN( intValue ) || intValue < 0 || intValue > 30 ) {
        this.value = "";
        return false;   
        }

    sib = this.nextSibling;
        while( sib && sib.className != "textfield" ) {
        sib = sib.nextSibling;   
        }

        if( sib ) {
        sib.focus();
        }
        else {
        return false;   
        }
    }

}

document.getElementById("textfields")[addEvent]( keyUp,

    function(){
    var e = arguments[0] || window.event,
        target = e.target || e.srcElement;

        if( target.className == "textfield" ) {

        validator.call( target, e );
        }

    },

    false
);

Use maxlength attribute to limit number of input

maxlength="2" 

After settting the above you can use onkeyup event to check the length and change focus

       $('#target').keyup(function () {
            var maxlength = $(this).attr('maxlength');
            if ($(this).val().trim().length == maxlength){
               //change focus to next input
                //change focus to next input
                var inputs = $(this).closest('form').find(':input');
                inputs.eq(inputs.index(this) + 1).focus();
            }  
        });