...

View Full Version : School Project - Validating Forms -



RockyDr
12-01-2006, 07:26 PM
Hello, I have a school project that involves validating forms. It is the end of the semester project, and I have taken it home with me on a flash drive :thumbsup: . The project involves validating a form entry to check to see if it has numbers or letters or only numbers or only letters etc.

Here is my javascript so far:



<SCRIPT Language="JavaScript">
var count1;
var count2;
var count3;
function bc()
{
for(count1=0;count1<=9;count1++)
{
if(document.ab.name.value.indexOf(count1)==-1)
{

}
else
{
alert('You can only have letters in the name.');
return;
}
}
if(document.ab.name.value=="")
{
alert('Please enter a name.');
return;
}

if(document.ab.add.value=="")
{
alert('Please enter an address.');
return;
}
for(count3=0;count3<=9;count3++)
{
if(document.ab.add.value.indexOf(count3)==-1)
{
if(count3==9)
{
alert('You must have a number in your address.');
return;
}
}
else
{
break;
}
}
for(count2=0;count2<=9;count2++)
{
if(document.ab.city.value=="")
{
alert('Please enter a city.');
return;
}
if(document.ab.city.value.indexOf(count2)==-1)
{

}
else
{
alert('You can only have letters in the city.');
return;
}
}
if(document.ab.state.value=="")
{
alert('Please enter a state.');
return;
}

if(document.ab.state.value.length==2)
{
}
else
{
alert('You must have two letters in the state.');
return;
}
if(document.ab.zip.value=="")
{
alert('Please enter a zip code.');
return;
}

if(document.ab.email.value.indexOf('@')==-1)
{
alert('Please enter a valid email.');
return;
}
if(document.ab.email.value.indexOf('.')==-1)
{
alert('Please enter a valid email.');
return;
}
if(document.ab.pw.value=="")
{
alert('Please enter a password.');
return;
}
document.ab.submit();
}
</SCRIPT>


I must make sure that the .name field only contains letters. I have it checking for numbers..but how would I make it check to make sure it has no signs..such as " # " or " ! " or something.

and

I have to make sure the address ".add" has numbers and letters. I have it so that it checks for numbers already, but how would I make sure it also has letters?

Thanks RockyDr :thumbsup:

david_kw
12-01-2006, 08:22 PM
The best way to check for letters in the name is to check exactly that. Not check for what shouldn't be in there.

Did your teacher show you regular expressions?

If not, you could loop through each character in the name to see if it is a letter.



var s = document.ab.name.value;

for (var i = 0; i < s.length; i++) {
if (('a' <= s[i] && s[i] <= 'z') || ('A' <= s[i] && s[i] <= 'Z')) {
// is a letter
} else {
// is not a letter
}
}


The first half of the if statement checks to see if it is a lowercase letter and the second half checks to see if it is upper.

You could check other conditions just by changing the if expression.

david_kw

RockyDr
12-01-2006, 08:38 PM
Thank you for the reply..yet that confused me sooooo much :(

I'm not sure I understand most of the code you put up there..but I will try to go through and learn each part. :cool:



var s = document.ab.name.value;

Shouldn't it be == instead? or would that be different?



for (var i = 0; i < s.length; i++)

For this part why do you use numbers to check for letters?



if (('a' <= s[i] && s[i] <= 'z') || ('A' <= s[i] && s[i] <= 'Z'))


This is the part that really made my brain explode...so for me to try to understand it..i'm gonna break it into sections. the first part

('a'<=s[i] && s[i] <= 'z')

Does that mean it checks from lowercase a all the way to z?
Or does it just check a and z?
Does increasing the i to 1 or 2 make it go up a letter..like b and y or c and x?
One last question.. i don't understand the || sign..what is that for?



// is a letter

Does this mean I put the code here that I want the run if it evaluates to having a letter?

david_kw
12-01-2006, 08:59 PM
Whoops. I guess since I gave you part of the answer I better explain it.



var s = document.ab.name.value;

Shouldn't it be == instead? or would that be different?

== test to see if two things are the same
= makes s have the same value as document.ab.name.value
so the = is what you want in this case




for (var i = 0; i < s.length; i++)

For this part why do you use numbers to check for letters?

you aren't using the numbers to test for letters. you are using the numbers to check each character in the string to see if it is what you want it to be
For example:
s = "david";
Then:
s[0] = 'd';
s[1] = 'a';
s[2] = 'v';
etc

So basically you are going through all the typed characters and checking each one.




if (('a' <= s[i] && s[i] <= 'z') || ('A' <= s[i] && s[i] <= 'Z'))


This is the part that really made my brain explode...so for me to try to understand it..i'm gonna break it into sections. the first part

('a'<=s[i] && s[i] <= 'z')

Does that mean it checks from lowercase a all the way to z?
Or does it just check a and z?

It checks all the letters from a to z.
Picture a list of letters
abcdefghijklmnopqrstuvwxyz
This line says if the letter you want to know about is bigger in the list than 'a' and smaller in the list than 'z' it is true
&& means and

Does increasing the i to 1 or 2 make it go up a letter..like b and y or c and x?

i is the letter you are interested in that someone typed. So when i = 0 then s[i] = 'd'
i = 1 then s[i] = 'a'
So, again, you are checking each character typed to see if it is a letter.

One last question.. i don't understand the || sign..what is that for?

|| is OR

which means it is
if ((typed letter is bigger than 'a') and (typed letter is lower than 'z') or (typed letter is bigger than 'A') and (typed letter is lower than 'Z')) then




// is a letter

Does this mean I put the code here that I want the run if it evaluates to having a letter?

Yep. That is a comment in javascript. Anything written on the line after // is ignored by the browser.


No offense but either you missed too many classes or your teacher is giving you an assignment that you aren't prepared to do. :)

david_kw

RockyDr
12-01-2006, 09:17 PM
Thank you soo much!

You should be a Web Design Teacher :thumbsup:


Umm..about my teacher...

Hes..an okay teacher, but he spends more time talking about Warcraft then explaining the assignments...

He explains most of the stuff..yet he doesn't explain the &&'s or the ||'s or how to check for letters..we've never had any assignments on them..

RockyDr
12-02-2006, 12:06 AM
Okay now I have a problem again :(

I tried using the bit of code you put up there..and well when I click submit it says "You can only have letters in the name." even when theres only letters..



var s = document.ab.name.value;

for(var count1=0;count1<s.length;count1++)
{
if(('a'<=s[count1] && s[count1]<='z')||('A'<=s[count1] && s[count1]<='Z'))
{

}
else
{
alert('You can only have letters in the name.');
return;
}
}

david_kw
12-02-2006, 02:04 AM
It works for me. Are you sure there are only letters? No spaces or anything?

david_kw

RockyDr
12-02-2006, 05:41 AM
Nope all I had was a single letter in there..

I tried it on just a blank new document..it still does the same thing = (

heres the code:



<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function bc()
{
var s = document.ab.name.value;
for(var count1=0;count1<s.length;count1++)
{
if(('a'<=s[count1] && s[count1]<='z')||('A'<=s[count1] && s[count1]<='Z'))
{

}
else
{
alert('You can only have letters in the name.');
return;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<form name="ab">
<input type="text" name="name">
<input type="button" onClick="bc();">
</form>
</BODY>
</HTML>

brandonH
12-02-2006, 09:13 AM
this is response to your teachers teaching methods, lol. if you want to learn all that stuff, you should take a look at http://www.w3schools.com .
they have all the basics that you should know. I still use it myself from time to time because i forget things after awhile of not using it.

dumpfi
12-02-2006, 10:43 AM
Replace this line:

if(('a'<=s[count1] && s[count1]<='z')||('A'<=s[count1] && s[count1]<='Z'))with this:
if(('a' >= s[count1] && s[count1] <= 'z') || ('A' >= s[count1] && s[count1] <= 'Z'))dumpfi

RockyDr
12-02-2006, 10:36 PM
I tried what you said Dumpfi..
It still says that I must only have letters even when only a is only entered..

david_kw
12-03-2006, 06:09 AM
Hmm, I'm honestly not sure why that didn't work. It was working in FF but not IE. I've had it working before. But try change:

s[count1]

to

s.charAt(count1)

like this



<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function bc()
{
var s = document.ab.name.value;
alert(s + ' is typeof ' + typeof(s));
for(var count1=0;count1<s.length;count1++)
{
if(('a'<=s.charAt(count1) && s.charAt(count1) <='z')||('A'<=s.charAt(count1) && s.charAt(count1)<='Z'))
{

}
else
{
alert("You can only have letters in the name. it is = '" + s.charAt(count1) + "' at " + count1);
return;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<form name="ab">
<input type="text" name="name">
<input type="button" onClick="bc();">
</form>
</BODY>
</HTML>


that worked for me in both. Maybe IE has some problem addressing a string as an array? I don't recall that problem in IE6 but I recently upgraded to IE7. I'll have to do some testing to see what's up.

david_kw

david_kw
12-03-2006, 06:20 AM
So now I can't get it to work in IE6 or 7. Maybe I'm imagining that I ever had that working in IE. Anyway, forget the s[i] stuff and stick to s.charAt(i) and you should be ok it looks like.

Also note I edited your alert and added a new one. Be sure to fix those. :)

david_kw

RockyDr
12-03-2006, 07:28 AM
AWESOME! Thanks for helping me get this resolved!

Now i've run into the next problem...

I'm trying to check that the address has both numbers and letters...and well I know screwed up somewhere..but I just can't figure it out...My code is soo screwed up..that I know it would only give you guys headaches if I posted it..

So heres my question..

How do you check that .add has both letters and numbers and nothing else (signs)?

RockyDr
12-03-2006, 08:21 AM
Here is the code im using to try to make sure that .add only had numbers and letters...

By the way... x is equal to .add



for(count2=0;count2<=x.length;count2++)
{
if((0<=x.charAt(count2) && x.charAt(count2)<=9)||('a'<=x.charAt(count2) && x.charAt(count2)<='z')||('A'<=x.charAt(count2) && x.charAt(count2)<='Z'))
{

}
else
{
alert('You must only have numbers and letters in your address.');
return;
}
}
for(count10=0;count10<=x.length;count10++)
{
if(('a'<=x.charAt(count10) && x.charAt(count10)<='z')||('A'<=x.charAt(count10) && x.charAt(count10)<='Z'))
{
break;
}
else
{
if(count10==x.length)
{
alert('You must have letters in your address.');
return;
}
}
}
for(count11=0;count11<=x.length;count11++)
{
if('0'<=x.charAt(count11) && x.charAt(count11)<='9')
{
break;
}
else
{
if(count11==x.length)
{
alert('You must have numbers in your address.');
return;
}
}
}


I don't understand why this doesn't work :(

brandonH
12-03-2006, 08:58 AM
this should do what you want.....
its just an example.




<html>
<head>
<script type=text/javascript>
function validatePass(){
var s=document.getElementById('text').value;
var invalidchars='0';
if(s!=''){

for (var i = 0; i < s.length; i++) {
if (('a' <= s.charAt(i) && s.charAt(i) <= 'z') || ('A' <= s.charAt(i) && s.charAt(i) <= 'Z') || (!isNaN(s.charAt(i)) && s.charAt(i)!=' ')) {
//do nothing
}else{invalidchars++;}

}

if(invalidchars!='0'){alert('ther are characters in the value not allowed.'+'\n'+'please use letters and numbers only');
}else{alert('the value is within specification');}
}
}
</script>
</head>

<body>
<input type=text id=text>
<input type=button value='check pass' onclick="validatePass();">
</body>
</html>




the part i chaged up would be:




if (('a' <= s.charAt(i) && s.charAt(i) <= 'z') || ('A' <= s.charAt(i) && s.charAt(i) <= 'Z') || (!isNaN(s.charAt(i)) && s.charAt(i)!=' ')) {


istead of checking the value of the numbers i check to see if the charAt is a number period. using the !isNaN(s.charAt(i)) . !isNaN is saying is not not a number, which means is a number.

you also may be wondering why i threw in the && s.charAt(i)!=' ' .
i dont know about other browsers but i know that IE will recognize the space as a number. so we have to exclude any spaces.

if you want to allow spaces just take that part out.


hope this helps.....

RockyDr
12-03-2006, 09:49 PM
Awesome thanks for the help everyone!

I'm done with the hardest parts of the project! = )

RockyDr
12-03-2006, 10:10 PM
I'm trying to check to see if at least one of the 3 radio buttons is checked.. and well I don't know why this isn't working...



if(document.ab.a[0].value.checked==-1)
{
if(document.ab.a[1].value.checked==-1)
{
if(document.ab.a[2].value.checked==-1)
{
alert('You must select a platform.');
return;
}
else
{

}
}
else
{

}
}
else
{

}

brandonH
12-03-2006, 11:41 PM
<html>
<head>
<script type=text/javascript>
function checks(){
var checkvalid='0';
var form=document.ab;
var inputs=form.getElementsByTagName('input'); //the array of input lements within the form
var length=inputs.length; //how many input elements are in the form

for(i=0;i<length-1;i++){
var checked=(inputs[i].checked?1:0); //returns a boolean value of true(1) or false(0)
var type=inputs[i].type; //grabs the type value
if(type=='checkbox'){
if(checked){checkvalid++;} //if the var checked returns true this if statment will be true.
}
}
if(checkvalid=='0'){alert('you must check at least one');}
else if(checkvalid>'1'){alert('please select only one');}
else{alert('one checkbox selected');}
}
</script>

</head>

<body>
<form name=ab>
<input type=checkbox name=a1>
<input type=checkbox name=a2>
<input type=checkbox name=a3>
<input type=button onclick=checks() value=validate>
</form>

</body>
</html>




the above looks inside the form and creates an array of all form elements that are inputs. it then goes through each of these elements and checks if it is a checkbox. if it is a checkbox it checks to see if it is checked. if it is it adds to the variable checkvalid. at the end if the var checkvalid is still 0, it alerts the user that they must select at least one. if the var is greater than 1 it alerts the user that they may only select one. if neither one of those conditions is true (only thingleft is the var is 1) it alerts saying one checkbox selected.

hope this is what you were looking for.

RockyDr
12-04-2006, 03:04 AM
I hope you didn't go through the trouble of writing that all out..:(

I'm trying to validate that one radio button is checked..you can't check more then one.

They are all named a..so wouldn't I use like an if and check a[0] through a[2] until one is found that is checked..and if none are then after it checks a[2] if it returns false then I send an alert..?

Thats what I tried to do in my code..but it just doesn't work :(

brandonH
12-04-2006, 03:48 AM
are you using a seperate script to uncheck the other check boxes if another one is clicked on?

because multiple checkboxes, even if all of them have the same name, can be checked.


if you want it to where the user can only check one checkbox, the i suggest using radio buttons. those when given all the same name allow the user to check only one of them.

brandonH
12-04-2006, 03:51 AM
this will check all elements named 'a' (should only be your checkboxes)




function checks(){
var checkboxes=document.getElementsByName('a');
var length=checkboxes.length;
var checkvalid='0';
for(i=0;i<length;i++){
var checked=checkboxes[i].checked?1:0;
if(checked){checkvalid++;}
}
if(checkvalid=='0'){alert('please select one of the checkboxes');}
else{alert('one or more of the checkboxes is selected');}
}



and yes i type everything out everytime. lol its all i do, lol. notepad baby!

RockyDr
12-04-2006, 04:20 AM
Yeah i'm using radio buttons for the problem right now..so only one can be selected at one time.. but I need to check that one of them 'is' selected.

So I have three radio buttons (not checkboxes ;) ) all with the name a. I need to make sure one of them is selected. If one of them is selected..do nothing, but if none of them is selected fire an alert('You must select a platform.'); followed by a return;

My code looks right to me..I just don't understand whats wrong :(

RockyDr
12-04-2006, 04:33 AM
Problem Solved :thumbsup:

Thank you again for the help brandonh :)


Now for the final problem of the entire project :eek:


When I submit the form..I need a confirm to pop up asking "Are you sure you want to submit this form?"

at the bottom of my function i have

document.ab.submit();

and inside the form tag I have

onSubmit="return confirm('Are you sure you want to submit this form?');"


But it doesn't pop up..it just submits right away :confused:

Is that not the right way to do it?

brandonH
12-04-2006, 05:10 AM
if you are using document.ab.submit() to submit the form, then no, the confrim box will not pop up. the only way the onsubmit will work is if the user clicks on the submit button. now you can however include in your script an if statement:



if(confirm('are you sure you want to submit?')){document.ab.submit();}else{return false;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum