...

View Full Version : validating form fields in correct sequence



Lisawynn
04-26-2004, 05:48 PM
Hi everyone!!!! I have this script below. What I need is to make it "break" and focus on the first text field that is invalid. Right now, it alerts the user to the error of their ways but does not focus on the first incorrectly filled out field - it stops at whatever field is the last to be filled out incorrectly rather than stopping at each incorrectly filled out field in sequence. How can I make it guide the user through the improperly filled out fields and then, when all the fields are filled in correctly, alert("Thank you!!");? Would I use an onblur in the respective text fields? I tried this but it immediately forces the user to correct their mistake rather than waiting until the button is pushed which, in this situation, needs to happen before the form is checked for validity. Any suggestions? Thanks very much.




<html>
<script language="javascript">

function checkname(){
var information=document.form5;
if(!isNaN(information.name.value)==true)
{
alert("Please enter a valid name - letters only");
information.name.focus();
information.name.select();
return false;
}
}
function checkphone(){
var information=document.form5;
if(information.phone.value.match(/^[0-9]{3}-[0-9]{4,}$/))
{
return true
}
else
{
alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
information.phone.focus();
information.phone.select();
return false;
}
}

function checkcity(){
var information=document.form5;
if((information.city.value<3)||(information.city.value>9)==true);
{
alert("Please enter a valid city - no less than 3 letters, no more than 9.");
information.city.focus();
information.city.select();
return false;
}
}


</script>
<BR><FONT color=green size=5>Part 5 </FONT><BR>10 marks<BR>
<form name="form5">
<TABLE align=center>
<TBODY>
<TR>
<TD>
<UL>
<LI>enter a name (letters only)<input type="text" name="name">
<LI>enter a phone number in ###-#### format<input type="text" name="phone">
<LI>enter a city (no less than 3 letters and no more than 9)<input type="text" name="city">
<LI>after entering data use this <input type=button value=button onClick="checkname(); checkphone(); checkcity()"> to
validate the data
<LI>if ok display message "Thank You"
<LI>if any field(s) are incorrect or not filled in then:
<OL>
<LI>display an alert stating which is the first incorrect field that
needs to be corrected.
<LI>highlight or place the cursor in the first incorrect field for
correction. </LI></OL></LI></UL></TD></TR></TBODY></TABLE>
</html>

Philip M
04-26-2004, 07:42 PM
Looks rather like a homework assignment to me.
See:-

http://www.codingforums.com/showthread.php?t=2090

You tell us your solution, I am sure someone will then comment on or correct it.

sad69
04-26-2004, 07:44 PM
I fixed it up for you, so this should work for you:


<script language="javascript">

function validateForm() {
if(!checkname()) {
return false;
}
else if(!checkphone()) {
return false;
}
else if(!checkcity()) {
return false;
}
else {
alert("Thank you.");
}
}

function checkname() {
var information=document.form5;
if(!isNaN(information.name.value)==true) {
alert("Please enter a valid name - letters only");
information.name.focus();
information.name.select();
return false;
}

return true;
}

function checkphone() {
var information=document.form5;
if(information.phone.value.match(/^[0-9]{3}-[0-9]{4,}$/)) {
return true
}
else {
alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
information.phone.focus();
information.phone.select();
return false;
}
}

function checkcity(){
var information=document.form5;
if( (information.city.value.length < 3) || (information.city.value.length > 9)) {
alert("Please enter a valid city - no less than 3 letters, no more than 9.");
information.city.focus();
information.city.select();
return false;
}

return true;
}

</script>


Some of your functions weren't returning true, and your city function wasn't working at all because of a semi-colon right after your if statement.

I created a function called validateForm() which calls each of your functions in order, and kicks out if one of them fail -- leaving the user at the appropriate field.

If you have any further troubles, just post back.

Hope that helps,
Sadiq.

sad69
04-26-2004, 07:48 PM
There are generally two types of people- ones that simply dump their entire page or problem and expect everyone to spend hours solving everything for them, and those that do their own homework first, and only ask very specific, manageable questions.


Well she did do the majority of the work... I just tweaked it and solved her problem. Hope I don't get in trouble! ;)

Sadiq.

Garadon
04-26-2004, 08:35 PM
who you quoting?


and some usefull comments, only validating to 1st invalid field is annoying to users(me), instead validate all fields and focus in the 1st wrong.

Willy Duitt
04-26-2004, 08:37 PM
Well she did do the majority of the work... I just tweaked it and solved her problem. Hope I don't get in trouble! ;)

Sadiq.

Yes I agree, Lisa has always posted her code that she is working with and has never posted just the question and ask someone to do her work. As far as I'm concerned, she studies hard and has come a long way in her studies. :thumbsup:

Lisa;

FWIW: As Sad pointed out, you need one function to validate your inputs and I would like to add that you started using regular expressions to validate the form fields and then switched up.

You name validation although using isNaN will work to disallow numerics, it will allow alt characters thru. The same with your city validation.

Below is an example of your requirements using regular expressions.
(which I am still struggling with also). ;)


<html>
<head>
<script type="text/javascript">

function validate(form){
if(!form.name.value.match(/[a-z]$/gi)){
alert("Please enter a valid name - letters only");
form.name.focus();
form.name.select();
return false;
}

if(!form.phone.value.match(/^[0-9]{3}-[0-9]{4}$/)){
alert("Please enter a valid 7 digit telephone number (xxx-xxxx).");
form.phone.focus();
form.phone.select();
return false;
}

if(!form.city.value.match(/^[a-z]{3,9}$/gi)){
alert("Please enter a valid city - no less than 3 letters, no more than 9.");
form.city.focus();
form.city.select();
return false;
}

else{ return true };
}
</script>
</head>

<body>
<BR><FONT color=green size=5>Part 5 </FONT><BR>10 marks<BR>
<form name="form5" onsubmit="return validate(this)">
<TABLE align=center>
<TBODY>
<TR>
<TD>
<UL>
<LI>enter a name (letters only)<input type="text" name="name">
<LI>enter a phone number in ###-#### format<input type="text" name="phone">
<LI>enter a city (no less than 3 letters and no more than 9)<input type="text" name="city">
<LI>after entering data use this <input type="submit" value="Submit"> to
validate the data
<LI>if ok display message "Thank You"
<LI>if any field(s) are incorrect or not filled in then:
<OL>
<LI>display an alert stating which is the first incorrect field that
needs to be corrected.
<LI>highlight or place the cursor in the first incorrect field for
correction. </LI></OL></LI></UL></TD></TR></TBODY></TABLE>
</body>
</html>

Also, please note that the language declaration has been deprecated and you should be using type instead.

.....Willy

Lisawynn
04-26-2004, 08:37 PM
Yes, it is a homework assignment and yes I did ask for help. I don't want anyone to do my homework for me. I am taking my course online and I don't have the luxury of a teacher or class readily available to me to ask questions of or have discussions with :confused: . I have a book and the internet. I tried quite a few different ways of working it out and I couldn't get it to work so I thought that I would ask. I posted the whole script because I thought it would be easier to understand. My apologies if I have misused the forum. Next time I will be sure to only post EXACTLY what I am looking for and wait for questions. Further discussion or a nudge in the right direction would have been help enough. That is all I was looking for.

p.s. Thanks sad69. :thumbsup:

Lisawynn
04-26-2004, 08:43 PM
Thanks Willy. I am confused with regular expressions as well but am trying to figure them out. We are not supposed to be learning them yet but sometimes it seems that that is the only thing that would be suitable(?) Also, I keep using the language declaration as that is what the teacher is teaching. Any scripts that he provides are all written in this manner and I am just going along with what he is teaching. I guess if its no longer acceptable, I will switch as you have suggested. Thank you for your help and encouragement. :)

Willy Duitt
04-26-2004, 08:47 PM
Don't worry about it Lisa.
If you need help, do not hesitate to post again. In fact, many others could learn from your example on how to post a question!

You have always precisely explained what you were trying to do and what has not worked as well as posting enough of the relevant code so that someone could run your codes to see what was going on. Many people say they have tried this or that but either do not provide any code or dump their entire page code including 12k of irrelevant code because they were to lazy to isolate the problem.

Stick around; :thumbsup:
.....Willy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum