PDA

View Full Version : Validation to check that value entered is in array

wuffy77
02-12-2008, 04:30 AM
Hi there,

The javascript below checks whether the value entered by the user is in an array. It works fine, but I would like it to work with more than one array and more than one textbox. So I would like the javascript to check that the value entered into textbox A is in array A and that the value in textbox B is in array B. Can anyone suggest how I might achieve this?

Many thanks :)


<html>
<head>
</head>

<body>

<script language=javascript>
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function cal(xx)
{
var arr= new Array(1,2,3,4,5,6,7,8,9,10);
if(arr.inArray(xx))
{
alert("Your value is found in the Array");
}
else
{
alert("Your value is not found in the Array");
}
}
</script>

<div>
Enter value into Textbox to check whether it is present in array.
The array has value from 1 to 10.
<form name=form1 onSubmit="cal(form1.val.value)">
Value: <input type=text name=val size=12>

<input type=submit name=cs value="Submit">
</form>
</div>


</body>
</html>
rangana
02-12-2008, 04:48 AM
Hi wuffy77,
I'm not an expert with javascript, but i've been learning much with this forum. So, let me suggest. Create two functions, one for the first textbox and the other for the next textbox. Also create another array which will be your comparison bases as in your code above. I've modified your code and this is what I get:
<html>
<head>
</head>

<body>

<script language="javascript">
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
var i;
for (i=0; i < this.length; i++)
{
if (this[i] == value)
{
return true;
}
}
return false;
};
function cal(xx)
{
var arr= new Array(1,2,3,4,5,6,7,8,9,10);
if(arr.inArray(xx))
{
alert("Your value is found in ArrayA");
}
else
{
alert("Your value is not found in the Array");
}
}
function cal2(xx)
{
var arr2 = new Array (11,12,13,14,15,16,17,18,19,20);
if(arr2.inArray(xx))
{
alert("Your value is found in ArrayB");
}
else
{
alert("Your value is not found in the Array");
}
}
</script>

<div>
Enter value into Textbox to check whether it is present in array.
The array has value from 1 to 10.
<form name="form1" onSubmit="cal(form1.val.value);cal2(form1.val2.value)">
Value: <input type="text" name="val" size="12">
<br/>
Value: <input type="text" name="val2" size="12">
<br/><br/>
<input type="submit" name="cs" value="Submit">
</form>
</div>


</body>
</html>
See if it helps:D
wuffy77
02-12-2008, 05:04 AM
Hi rangana!

Thanks for your reply. I have tested your code and it works, but the only thing is that I will probably need to expand the form in future, so I will need to check many arrays associated with many textboxes. Ideally, therefore, I would like one function that is easy to expand. Otherwise it could get a bit messy if I have to list all of the functions in onSubmit.


onSubmit="cal(form1.val.value);cal2(form1.val2.value);cal3(form1.val3.value)" etc...


Also, it would be nice to have one alert message listing all the things that are not found in each array, rather than a new popup for each.

But thanks again ragana. I agree, these forums are fantastic for learning and understanding javascript.
rangana
02-12-2008, 05:06 AM
You're quite welcome wuffy77!..Glad I could help, I do post back for whatever mess I could bring creating one function and one alert,...it's now my time to sleep!.*g :D
freshOne
02-12-2008, 06:08 AM
<html>
<head>
</head>

<body>

<script language=javascript>

function checkA()
{
var arrA= new Array(1,2,3,4,5,6,7,8,9,10);
var a = document.getElementById ('a')

var countA;
for (countA=0; countA < arrA.length; countA++)
{
if (a.value==arrA[countA])
{
return true
}
return false
}
}

function checkB()
{
var arrB= new Array(11,12,13,14,15,16,17,18,19,20);
var b = document.getElementById ('b')

var countB;
for (countB=0; countB < arrB.length; countB++)
{
if (b.value==arrB[countB])
{
return true
}
return false
}
}


function result()
{
var msg=""

var resultA = checkA()
if (resultA)
{
msg = msg + "value a was found. "
}
else
{
msg = msg + "value a was not found. "
}

var resultB = checkB()
if (resultB)
{
msg = msg + "value b was found. "
}
else
{
msg = msg + "value b was not found. "
}

alert(msg)

}


</script>

<form id="form1" onSubmit="result()">
Enter value into Textbox to check whether it is present in array. The array has value from 1 to 10.
Value A: <input type=text id='a' size=12>
<br><br>
Enter value into Textbox to check whether it is present in array. The array has value from 11 to 20.
Value B: <input type=text id='b' size=12>
<br><br>
<input type=submit name=cs value="Submit">
</form>

</body>
</html>

check if it helps
note: i didn't use a validator to check if the textboxes r empty, it simply consider it a value that is not in the array
code in red r the parts u will need to repeat for evey extra array u add (taking in consideration changing variables names & messages)
this is wht i could come up with :D
it could be done more professionaly by creating an array to save ur arrays names & do the checking in a for loop passing all existing arrays..this way it will easier for u to add extra arrays later on..i came up with this while i was posting this, so if the above code didn't work with u i would be glad to give this a shot
freshOne
02-12-2008, 06:14 AM
You're quite welcome wuffy77!..Glad I could help, I do post back for whatever mess I could bring creating one function and one alert,...it's now my time to sleep!.*g :D
i wasn't trying to steal it from u, i just had nothing else to do :D
give it a shot & lets see which solution is better..as we r both javascript professionals :rofl:
wuffy77
02-12-2008, 07:24 AM
Hi freshOne,

This is looking hopeful, however for me it brings up the error message even if I write the correct thing in both text boxes...don't know if this happened to you, so perhaps I'm doing something wrong? (I entered 2 in the first text box and 12 in the second).

It would be fantastic if you could get this to work with the for loop you were talking about...I'm afraid I'm out of my depth with this one.

Many thanks
wuffy77
02-12-2008, 07:27 AM
Hi freshOne,

This is looking hopeful, however for me it brings up the error message even if I write the correct thing in both text boxes...don't know if this happened to you, so perhaps I'm doing something wrong? (I entered 2 in the first text box and 12 in the second).

It would be fantastic if you could get this to work with the for loop you were talking about...I'm afraid I'm out of my depth with this one.

Many thanks

Apologies! I didn't realise you had a slighly different alert message if you enter them correctly. Yes, this works perfectly, but it would be brilliant if you could put the array names into an array!

Thank you!
freshOne
02-12-2008, 08:21 AM
u r not, i offered it first :D
i'll try that out & come back to u
coothead
02-12-2008, 04:43 PM
Hi there wuffy77,

have a look at this multi array example...

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

<style type="text/css">
li {
margin-bottom:5px;
}
</style>

<script type="text/javascript">
var arr=[
[1,2,3,4,5],
['a','b','c','d','e'],
['a1','b1','c1','d1,','e1'],
['dog','cat','mouse','budgie','fish']
];
var inps;
var count=[0,0,0,0]; /*Note that the count length must be equal to arr length*/
window.onload=function() {
inps=document.forms[0].getElementsByTagName('input');
document.forms[0].onsubmit=function() {
return checkArrays();
}
}
function checkArrays() {
for(var k=0;k<inps.length;k++) {
if(inps[k].id=='inp'+k){
for(var c=0;c<arr[k].length;c++){
if(inps[k].value.match(arr[k][c])){
count[k]=1;
alert('input id="inp'+k+'" value="'+inps[k].value+'" matches an array value');
}
}
}
}
for(var m=0;m<arr.length;m++) {
if(count[m]==0){
alert('input id="inp'+m+'" value="'+inps[m].value+'" does not match an array value');
document.forms[0][m].value='';
document.forms[0][m].focus();
return false;
}
}
return true;
}

</script>

</head>
<body>

<form action="http://www.google.com/" method="get">
<ol>
<li><input id="inp0" name="number" type="text" value=""><label> : numbers</label></li>
<li><input id="inp1" name="letter" type="text" value=""><label> : letters</label></li>
<li><input id="inp2" name="letNum" type="text" value=""><label> : letter and number</label></li>
<li><input id="inp3" name="animal" type="text" value=""><label> : animal</label></li>
<li><input type="submit"></li>
</ol>
</form>

</body>
</html>

It will work with any number of inputs and corresponding arrays.

p.s. was the IE6 problem in your other thread resolved?
rangana
02-12-2008, 07:06 PM
....just when I woke up and the mighty coothead gives it a luster :D
wuffy77
02-13-2008, 04:02 AM
That is indeed a masterful piece of code (yet again!) Coothead! Many thanks.

It is so masterful, however, that I'm not sure how to adapt it for my code! I am already using some arrays (which are pretty big) elsewhere in my code, and I was hoping to reuse them in this script. In your code you have listed the arrays like this:


var arr=[
[1,2,3,4,5],
['a','b','c','d','e'],
['a1','b1','c1','d1,','e1'],
['dog','cat','mouse','budgie','fish']
];


But elsewhere in my code I have some arrays listed like this:

var numbers = new Array [1,2,3,4,5],
var letters = new Array ['a','b','c','d','e'],
var numsandletters = new Array ['a1','b1','c1','d1,','e1'],
var animals = new Array ['dog','cat','mouse','budgie','fish']


I therefore tried to keep my original arrays and adapt your code as follows:

var arr=[
numbers,
letters,
numsandletters,
animals
];


Needless to say it didn't work! And I have also tried other ways, none of which have worked.

Is it possible to adapt the code for this or is the best way simply to restate the arrays in var arr?

Thanks Coothead!

P.S. I didn't get the IE6 problem fixed with javascript. I just decided to do it in Flash instead. Seems to work alright...but who knows how it'll look in IE6 - I haven't tested it yet!
coothead
02-13-2008, 04:46 AM
Hi there wuffy77,

Just cut & paste your arrays into....

var arr=[

];

..remembering to swap the parenthesis brackets for square brackets with a comma after all except the last. ;)
wuffy77
02-13-2008, 05:43 AM
Ok, so if I've understood correctly I just have the arrays written twice in the code?

I've been having a go at adapting the code further. What I'm trying to do is this: if a user enters a value into more than one textbox and none or some of the values are found in the array, I would like the a list of all of the incorret values to be listed in one alert message. And if all values are correct, I don't want an alert message at all but instead rerurn(true) so that all the values are passed through. This is what I have come up with:


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

<style type="text/css">
li {
margin-bottom:5px;
}
</style>

<script type="text/javascript">
var arr=[
[1,2,3,4,5],
['a','b','c','d','e'],
['a1','b1','c1','d1,','e1'],
['dog','cat','mouse','budgie','fish']
];
var inps;
var count=[0,0,0,0]; /*Note that the count length must be equal to arr length*/
window.onload=function() {
inps=document.forms[0].getElementsByTagName('input');
document.forms[0].onsubmit=function() {
return checkArrays();
}
}
function checkArrays() {

var alertMessage = "The following value/s are not found:\n\n";

for(var k=0;k<inps.length;k++) {
if(inps[k].id=='inp'+k){
for(var c=0;c<arr[k].length;c++){
if(inps[k].value.match(arr[k][c])){
count[k]=1;
alertMessage = alertMessage;
}
}
}
}

for(var m=0;m<arr.length;m++) {
if(count[m]==0){
alertMessage += +inps[m].value+"\n\n"
document.forms[0][m].value='';
document.forms[0][m].focus();
}
if (alertMessage != "The following value/s are not found:\n\n")
{
alert(alertMessage);
return (false);
}
}

return true;
}

</script>

</head>
<body>

<form action="http://www.google.com/" method="get">
<ol>
<li><input id="inp0" name="number" type="text" value=""><label> : numbers</label></li>
<li><input id="inp1" name="letter" type="text" value=""><label> : letters</label></li>
<li><input id="inp2" name="letNum" type="text" value=""><label> : letter and number</label></li>
<li><input id="inp3" name="animal" type="text" value=""><label> : animal</label></li>
<li><input type="submit"></li>
</ol>
</form>

</body>
</html>


There are a few confusing problems. And it might be less confusing to actually test it than for me to try to explain them!

In summary, what I'm aiming for is:
(1) for all of the incorrect values to be listed in one go.
(2) if values are correct, there should be no alert message and the values should be allowed to be submitted.

Thanks :)
wuffy77
02-13-2008, 06:00 AM
OK, well I stupidly had my alert message bit within the for loop, so I suppose it was being overwritten each time! I think it now works, but I don't entirely trust my self so I will be testing it thoroughly! Here's the code:


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

<style type="text/css">
li {
margin-bottom:5px;
}
</style>

<script type="text/javascript">
var arr=[
[1,2,3,4,5],
['a','b','c','d','e'],
['a1','b1','c1','d1,','e1'],
['dog','cat','mouse','budgie','fish']
];
var inps;
var count=[0,0,0,0]; /*Note that the count length must be equal to arr length*/
window.onload=function() {
inps=document.forms[0].getElementsByTagName('input');
document.forms[0].onsubmit=function() {
return checkArrays();
}
}
function checkArrays() {

var alertMessage = "The following value/s are not found:\n\n";

for(var k=0;k<inps.length;k++) {
if(inps[k].id=='inp'+k){
for(var c=0;c<arr[k].length;c++){
if(inps[k].value.match(arr[k][c])){
count[k]=1;
alertMessage = alertMessage;
}
}
}
}

for(var m=0;m<arr.length;m++) {
if(count[m]==0){
alertMessage += ''+inps[m].value+'\n\n'
document.forms[0][m].value='';
document.forms[0][m].focus();
}
}
if (alertMessage != "The following value/s are not found:\n\n")
{
alert(alertMessage);
return (false);
}

return true;
}

</script>

</head>
<body>

<form action="http://www.google.com/" method="get">
<ol>
<li><input id="inp0" name="number" type="text" value=""><label> : numbers</label></li>
<li><input id="inp1" name="letter" type="text" value=""><label> : letters</label></li>
<li><input id="inp2" name="letNum" type="text" value=""><label> : letter and number</label></li>
<li><input id="inp3" name="animal" type="text" value=""><label> : animal</label></li>
<li><input type="submit"></li>
</ol>
</form>

</body>
</html>
wuffy77
02-13-2008, 07:26 AM
Does anyone know how I can adapt the code posted in the above message so that the user is allowed to leave a text box blank?

I have tried adding a blank ' ' to each array, but this results in the alert never popping up, even when what is entered is not in the array (which makes sense considering how the code is working).

I've tried all sorts of logic, but without success.

Many thanks for any help!
coothead
02-13-2008, 07:04 PM
Hi there wuffy77,
That is indeed a masterful piece of code (yet again!)
Actually, the script was badly flawed. :o :o :o
On further testing I discovered it would accept 1111111 or aaaaaa or b1b1b1 or even catcatcat. :supereek:
Try this modified version, it may even meet your revised requirements as well...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>check inputs value against array values</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
li {
margin-bottom:5px;
}
label {
color:#600;
}
</style>

<script type="text/javascript">

var arr=[
[1,2,3,4,5],
['a','b','c','d','e'],
['a1','b1','c1','d1,','e1'],
['dog','cat','mouse','budgie','fish']
];

var count=[0,0,0,0]; /*Note that the count length must be equal to arr length*/

var inps;

var test=true;

var message='Hello wuffy...\n\n';

window.onload=function() {
inps=document.forms[0].getElementsByTagName('input');
document.forms[0].onsubmit=function() {
return checkArrays();
}
}
function checkArrays() {
for(var k=0;k<inps.length;k++) {
if(inps[k].id=='inp'+k){
for(var c=0;c<arr[k].length;c++){
if((inps[k].value==arr[k][c])||(inps[k].value=='')){
count[k]=1;
}
}
}
}

for(var m=0;m<arr.length;m++) {
if(count[m]==0){
message+='input '+(m+1)+' value="'+inps[m].value+'" does not match an array value\n\n';
document.forms[0][m].value='';
test=false;
}
}
if(test==false) {
alert(message);
message='Hello wuffy...\n\n';
count=[0,0,0,0];
test=true;
return false;
}
else {
count=[0,0,0,0];
test=true;
return true;
}
}
</script>

</head>
<body>

<h4>The inputs will accept the array values assigned to them or may be left blank</h4>

<form action="http://www.google.com/" method="get">
<ol>
<li><input id="inp0" name="number" type="text" value=""><label> : 1,2,3,4,5</label></li>
<li><input id="inp1" name="letter" type="text" value=""><label> : a,b,c,d,e</label></li>
<li><input id="inp2" name="letNum" type="text" value=""><label> : a1,b1,c1,d1,e1,</label></li>
<li><input id="inp3" name="animal" type="text" value=""><label> : dog,cat,mouse,budgie,fish</label></li>
<li><input type="submit"></li>
</ol>
</form>

</body>
</html>
wuffy77
02-14-2008, 05:01 AM
Boomin' marvellous :D Thanks Coothead
freshOne
02-14-2008, 05:20 AM
....just when I woke up and the mighty coothead gives it a luster :D
loool same feeling here :lol: