How to validate a selected box with a button.

**tv_boy123** · 04-23-2009 06:37 AM

I'm not really sure how I would do this. I've looked at lots of tutorials on the web but they're all automatic validation for a whole form, i want a button to only validate when a user has the cursor in a selected input box. When they submit the button if it is empty it will say Please enter a number or something. I could do this for the whole form, but what I want is so that the selected text box is the only one that is validated.

The second validation rule is to compare it against a set of numbers, I don't really have a clue how to do this

In more depth:
Say there are 5 input boxes. 3 of them have a number in them and 2 are blank e.g. 4,3,"",7,""

What i would like to be able to do, is if I had a set of numbers that they should be e.g. 4,3,5,7,3 and for there to be a check button, that when submitted, would validate the selected input box. For example when the button is pressed if the selected box was empty it would say "please enter a number" (i would do this with an if else statement i think) e.g.

Code:

<html>
<head>
<script type="text/javascript">
function input_check()
if (ch == '')
{
alert("Please Enter A Number");
}
</script>
</head>
<body>
<input type="text" size="2" value="4" id="N0">
<input type="text" size="2" value="3" id="N1">
<input type="text" size="2" value="" id="N2">
<input type="text" size="2" value="7" id="N3">
<input type="text" size="2" value="" id="N4">
<input type="button" onclick="input_check()" value="Check" />

</body>
</html>

Something along those lines. But if the incorrect number was entered it would say "Incorrect number" (it checks against the 5 numbers 43573). I think i might have to do something with focus so that is just says whether that specific input box is correct or not? I also don't know how i would check against these 5 numbers? I would like to be able to do this with larger lengths of numbers too.

Please help me, I can't find any tutorials covering anything like this

**Fang** · 04-23-2009 08:04 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function input_check() {
var num='43573';
var aInput=document.getElementsByName('n')
for(var i=0; i<num.length; i++) {
    if(num[i]!=aInput[i].value) {
        alert("please enter a number");
        aInput[i].value='';
        aInput[i].focus();
        break;
        }
    }
}
</script>

</head>
<body>
<form action="#" name="form1">
<input type="text" size="2" value="4" name="n">
<input type="text" size="2" value="3" name="n">
<input type="text" size="2" value="" name="n">
<input type="text" size="2" value="7" name="n">
<input type="text" size="2" value="" name="n">
<input type="button" onclick="input_check()" value="Check">
</form>
</body>
</html>

**tv_boy123** · 04-23-2009 08:53 AM

Thank you soooo much Fang!

that's awesome! How would I make it so that only the box with the cursor currently in it is validated by the button? Or is that not possible? I want the user to be able to fill in the text boxes in any order and validate their latest entry as they go along. But yeah, thank you so much, it is such a big help!

**Fang** · 04-23-2009 09:49 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var aInput=document.getElementsByName('n');
for(var i=0; i<aInput.length; i++) {
    aInput[i].onblur=function (i) {
        return function (e) {
            input_check(this, i)
            };
        }(i);
    }
};

function input_check(obj, i) {
var ERROR=false;
var num='43573';
if(i && num[i]!=obj.value) {
    ERROR=true;
    }
else {
    var aInput=document.getElementsByName('n');
    for(var i=0; i<num.length; i++) {
        if(num[i]!=aInput[i].value) {
        	ERROR=true;
            obj=aInput[i];
            break;
            }
        }
    }
if(ERROR) {
    alert("please enter a number");
    obj.value='';
    obj.focus();
    }
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
input:focus {outline:1px dotted red;}
</style>

</head>
<body>
<form action="#" name="form1">
<input type="text" size="2" value="4" name="n">
<input type="text" size="2" value="3" name="n">
<input type="text" size="2" value="" name="n">
<input type="text" size="2" value="7" name="n">
<input type="text" size="2" value="" name="n">
<input type="button" onclick="input_check()" value="Check">
</form>
</body>
</html>

**tv_boy123** · 04-23-2009 11:58 AM

Thank you Fang! That's what i was looking for

it seems to check even if I haven't pressed the button, any ideas what I would do to prevent that from happening? It also jumps after it has checked to the next empty box, would it be possible for it just to lose focus or deselect? It's so close to being perfect though! Thank you for your help Fang, I've been pondering over this for quite sometime, it is appreciated sooooo much!!

**Fang** · 04-24-2009 03:11 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var aInput=document.getElementsByName('n');
for(var i=0; i<aInput.length; i++) {
    aInput[i].onblur=function (i) {
        return function (e) {
            input_check(aInput, i)
            };
        }(i);
    }
var controls=document.getElementsByTagName('input');
controls[controls.length-1]. onclick=function() {input_check(aInput);};
};

function input_check(aInput, i) {
var ERROR=false;
var num='43573';
if(i!=null) {
    if( num[i]!=aInput[i].value) {
        ERROR=true;
        }
    }
else {
    for(var i=0; i<num.length; i++) {
        if(num[i]!=aInput[i].value) {
        	ERROR=true;
            break;
            }
        }
    }
if(ERROR) {
    alert("please enter a number");
    aInput[i].value='';
    aInput[i].focus();
    }
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
input:focus {outline:1px dotted red;}
</style>

</head>
<body>
<form action="#" name="form1">
<input type="text" size="2" value="4" name="n">
<input type="text" size="2" value="3" name="n">
<input type="text" size="2" value="" name="n">
<input type="text" size="2" value="7" name="n">
<input type="text" size="2" value="" name="n">
<input type="button" value="Check">
</form>
</body>
</html>

**tv_boy123** · 04-24-2009 05:29 AM

You are an absolute star Fang!!! You are so helpful and kind helping me out! Thank you so much

that is perfect. I hope you have a good weekend, take care

**tv_boy123** · 04-24-2009 05:51 AM

Is there anyway I could make it so it only validates the cell when the button is clicked? At the moment it automatically comes up with a warning even if I haven't pressed the button. I tried changing some bits of code but I couldn't get it to only validate the cell if the button is pressed. Any ideas? Sorry for being a pain

thanks.

**Fang** · 04-24-2009 08:44 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var aInput=document.getElementsByName('n');
for(var i=0; i<aInput.length; i++) {
    aInput[i].onfocus=function() {this.focused=true; blurred(this, aInput)};
    }
var controls=document.getElementsByTagName('input');
controls[controls.length-1]. onclick=function() {input_check(aInput);};
};

function blurred(obj, aInput) {
for(var i=0; i<aInput.length; i++) {
    if(aInput[i]!=obj) {aInput[i].focused=false;}
    }
}

function input_check(aInput, i) {
var ERROR=false;
var CHECKED=false;
var num='43573';
for(var i=0; i<num.length; i++) {
if(aInput[i].focused) {
    if(num[i]!=aInput[i].value) {
        ERROR=i;
        }
    else {
        aInput[i].focused=false;
        }
    CHECKED=true;
    break;
    }
else {
    if((ERROR==false && !CHECKED) && num[i]!=aInput[i].value) {
        ERROR=i;
        }
    }
}
if(ERROR!==false) {
    alert("please enter a number");
    aInput[ERROR].value='';
    aInput[ERROR].focus();
    }
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
input:focus {outline:1px dotted red;}
</style>

</head>
<body>
<form action="#" name="form1">
<input type="text" size="2" value="4" name="n">
<input type="text" size="2" value="3" name="n">
<input type="text" size="2" value="" name="n">
<input type="text" size="2" value="7" name="n">
<input type="text" size="2" value="" name="n">
<input type="button" value="Check">
</form>
</body>
</html>

**tv_boy123** · 04-24-2009 10:10 AM

Thank you! I cannot thank you enough, it has truly made so much difference to me. Thank you for the continued help

cya Fang!

Thread: How to validate a selected box with a button.

Thread Tools

Display

How to validate a selected box with a button.

Thank you!!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions