...

View Full Version : Help validating forms



jinntet
08-17-2004, 02:30 AM
Hey,

I really, really need some help with form validation. I have tried over 20 codes to get an email address to validate but none of them work. I'm not very good with Javascript! As far as I can see I am placing the function in the correct place and also calling it at the right time. I would be greatful for any help any one could give me.

Thanks

Willy Duitt
08-17-2004, 03:08 AM
How can we possibly help you when you have failed to provide any codes and/or the email validation requirements.....

.....Willy

Kor
08-17-2004, 09:47 AM
You may try this very very simple email validator:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function validate(f){
var p=0;
var v = new Array()
v=f.email.value.split('');
for (var i=0;i<v.length;i++){
if((v[i]=='@')||(v[i]=='.')){
p++
}
}
if(p<2){
alert('Please type a valide e-mail');
f.email.focus();
return false
}
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
e-mail <input name="email" type="text">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>


Well, it is not a complete validator (the email validator is a really complex problem), but it covers all the possibilities but only according to the following presumtions:

1. the minimum mail string type is something like 'name@domain.extension' (it have at least one "@" and one "." characters)
2. the most common user's mistakes are
- omitting the input
- omitting the extension (that means the dot)
- omitting the @
3. users are well intentioned people and their omitions are accidentally ones, by pure mistake

jinntet
08-17-2004, 10:02 AM
Sorry, was a bit tired been at it for over 10 hours. Told you I was not very good at it. Its a shopping cart so the form is for customers to order their good. So they submit all their details like name, address, credit card details, email and at the end their is a submit button to submit the order. The order is submitting fine but I can't get anything to validate like poscode, credit card details and email address. I would like a pop up alert telling them if anything is incorrect. I have just tried the code but it does not work.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function validate(f){
var p=0;
var v = new Array()
v=f.email.value.split('');
for (var i=0;i<v.length;i++){
if((v[i]=='@')||(v[i]=='.')){
p++
}
}
if(p<2){
alert('Please type a valide e-mail');
f.email.focus();
return false
}
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
e-mail <input name="email" type="text">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

jinntet
08-17-2004, 10:05 AM
Thanks for this but I'm afraid it did not work for me.

Kor
08-17-2004, 10:25 AM
Thanks for this but I'm afraid it did not work for me.

I beg your pardon??? It should work on every browsers I know. At least it works for what I have now installed (NS6, NS7, Mozilla 1.7, Firefox, Opera 5) on XP on PC ...

It validates the classic way. If there is no email or if the string has not a '@' and a '.', an alert message apperas and the submit is stopped. If not, the data is submitted.

What in fact don't work for you??? :confused:

jinntet
08-17-2004, 10:35 AM
I'm using netscape 7. There was no alert telling me the email address was not valid when I entered just letters.

Kor
08-17-2004, 10:41 AM
Should work either. check whether you have javascript enable or not,

Edit-Preferences-Advanced-Scripts&Plugins

and make sure to check the small checkbox Enable javaScript for "Navigator"

jinntet
08-17-2004, 10:54 AM
Both of these are checked but there is still no alert message advising that an invalid email address has been entered.

Kor
08-17-2004, 11:09 AM
it must work when you press the submit button. Isn't that what you wanted?

If you don't see the alert, there must be something wrong with your browser or your OS..

Can you see the alert on this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('see this?')">
</body>
</html>

By the way, make sure your code has the doctype and the content-type.

jinntet
08-17-2004, 02:00 PM
Yes I want the alert when you press the submit button. I can see the see this one you gave me but still nothing with the first piece of code. I have this in at the top
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<link rel=stylesheet type="text/css" href="JLstyle.css">
<BODY>
<IMG SRC="crakinlogo.gif" width=100% height=150><BR>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function validate(f){
var p=0;
var v = new Array()
v=f.email.value.split('');
for (var i=0;i<v.length;i++){
if((v[i]=='@')||(v[i]=='.')){
p++
}
}
if(p<2){
alert('Please type a valide e-mail');
f.email.focus();
return false
}
}

Then in my form I have this
<TD><B class="first">Email Address:</B></TD>
<TD><INPUT TYPE="EMAIL" NAME="email" SIZE=30 onsubmit="return validate(this)"></TD>

Kor
08-17-2004, 04:06 PM
TD><B class="first">Email Address:</B></TD>
<TD><INPUT TYPE="EMAIL" NAME="email" SIZE=30 onsubmit="return validate(this)"></TD>


onsumit event handler is to be used only on [b]FORM[/] tag. not on on input. I have gave you an example which you have modified, thatis why you got no proper answer. Review my example, please.

jinntet
08-17-2004, 07:09 PM
I'm sorry but I don't know what you mean. This is my first time doing Javascript and I don't really understand it. Do you mean that my form can't be in a table if I want to validate it?

mcdougals4all
08-17-2004, 07:59 PM
The table is not the problem. You are referencing the validation function from the wrong point in your html - on the input tag within the form rather than form tag itself.

Your opening form tag should look like something like this...


<form onsubmit="return validate(this)"...

Applying onsubmit to a single input has no effect because you are actually submitting the form which then collects all the data from your inputs.

jinntet
08-17-2004, 09:19 PM
Do you mean somewhere here <FORM NAME="form1" METHOD="POST" ?

mcdougals4all
08-17-2004, 10:09 PM
Yes, anywhere following <form and before its closing >.

For a simple example of how onsubmit works, save the following as an html file and view in your browser to see how things are interacting.


<html>

<head>

<script type="text/javascript">
function myFunction()
{ alert('Onsubmit has been triggered!');
}
</script>

</head>

<body>

<form name="" action="" method="" onsubmit="myFunction()">

<input type="textarea" />

<input type="submit" />

</form>

</body>

</html>

jinntet
08-17-2004, 10:56 PM
The code you gave me to test works fine and everything seems Ok but sadly the email address still did not validate when I put it at the beginning of the form tag.

mcdougals4all
08-17-2004, 11:43 PM
Okay, if you're able to understand the example I provided let's go back to the code provided by Kor.

Cut and paste his code and save as an html file. Don't make any changes at this point.

Now simply enter some text with no @ or . included. If this produces an alert (and it should) use this file as a skeleton to base your form page on. If you take the time to make sure everything is working as expected while adding to or editing the file you should be on your way.

Kor
08-18-2004, 08:50 AM
the forms' validate function must be handled only by onsubmit event. This event is specific only for form tag.

Thus, the schematic validate code looks always like:

the javascript code:
<script type="text/javascript">
function validate(){
if (..condition..){
...actions/methods...;
return false;
}
else{
return true;
}
}
</script>

the HTML code:
<form onsubmit="return validate()">
...form's elements
...form's elements
<input type="submit" value="submit">
</form>

Kor
08-18-2004, 08:58 AM
well... in some cases validate codes may be fired from input or textarea fields, but in those cases the event used is onkeyup or onkeydown or/and onblur onfocus.

This kinda might be used for alfa/numeric validation.

But, in your case (validate an email) I guess it is better to validate onsubmit.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum