...

View Full Version : Trouble with Simple Javascript Form Validation



SirScriptsAlot
03-23-2012, 03:57 AM
I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have:

the xhtml file

<?xml version = ″1.0″ encoding = ″utf-8″ ?>
<!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>


<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<script src="gas24.js" type="text/javascript"></script>

<h2> Registration Form </h2>

<title>
Javascript Form Validation Homework

</title>

</head>

<body>

<table border="">
<form name="validation_form" method="post" onsubmit="return validate()">

<tr>
<td>
<t>Name: <input type="text" name="YourName" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/>
</td> </tr> </br>
<tr>
<td>
Password: <input type="password" name="YourPassword" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
Re-Type Password:
<input type="password" name="passwordConfirmed" size="10" maxlength="10"/>
</td> </tr> </br>
<tr>
<td>
Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male
<input type="radio" name="FemaleBox" Value="Female"> Female
</td> </tr> </br>
<tr>
<td>
Comments:
<input type="text" name="Comments" size="100" maxlength="500" value=""/>
</td> </tr>
<tr>
<td>
<input type="submit" value="Submit"/>
</td> </tr>
</form>



</table>

<p></p>



</body>
</html>

The javascript file:
I've tried two things. This:
<SCRIPT LANGUAGE="JavaScript">

function validation()
{


var x=document.forms["validation_form"]["YourName"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}


}

And this:

function validation()

if ( document.validation_form.YourName.value == "" )
{

alert( "Please type your name.");
valid = false;
}



if ( document.validation_form.YourPassword.value =!
"document.validation_form.Confirm.value" )
{
alert ( "Please confirm your password." );
valid = false;
}


I would greatly appreciate it if somebody could tell me what I'm doing wrong.

Old Pedant
03-23-2012, 06:33 AM
f ( document.validation_form.YourPassword.value =!
"document.validation_form.Confirm.value"

No such operator as =!

It is !=

Yes, exactly..

And you need to dump the quotes there. SO:


if ( document.validation_form.YourPassword.value != document.validation_form.Confirm.value )


Just setting valid=false isn't enough. You must then return valid

ALso, the first statement in your validation function need to be var valid = true;

By the by, radio buttons aren't radio buttons unless you give two or more the SAME NAME.

Yours should probably just be named "gender".

Philip M
03-23-2012, 06:50 AM
Form validation of the pattern if ( document.validation_form.YourName.value == "" ) is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

A proper name can only contain letters, hyphen, space and apostrophe. Mary-Lou O'Flanaghan-MacDonald

var x=document.forms["validation_form"]["YourName"].value;
should be
var x = document.validation_form.YourName.value;
or
document.forms[0].Your_Name.value;
or using square bracket notation (not needed):-
var x=document["validation_form"]["YourName"].value;

if (x==null || x=="")
The value of a form field can never be null - only "" (blank).

There is no need to define a variable valid. If the test fails simply return false (and preferably then clear the offending field and refocus on it).

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript">.

24 may well be insufficient for the maximum number of characters allowed in the email address. The maximum possible is 256. And setting a maximum of 10 characters for the name field is just silly. SirScriptsAlot is longer than that!! Comments field should be a textarea, not a textbox (a single line).


There's nothing lucky about that. He gambled and got his reward. Sports Commentator BBC Radio London

felgall
03-23-2012, 08:34 AM
<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript">.

<script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).

Mishu
03-24-2012, 05:42 AM
<script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).

Yes you are correct in pointing out <script type = "text/javascript"> is also long deprecated and if someone knows what they are talking about they should mention it is also deprecated when pointing out that <script language=javascript> is deprecated.

But I believe, because I haven't actually tested it, that IE v8 and under won't run javascript with <script type="application/javascript">. If that is the case what is the alternative for IE v8 and under?.

The only I see is <script type = "text/javascript"> and so that caveat should be mentioned when talking about what type attribute to use.

Mishu
03-24-2012, 07:22 AM
To the OP:


I have the form up but for some reason I can't get it to validate.In your code you have a very obvious mistake.


<form name="validation_form" method="post" onsubmit="return validate()">and your function is


function validation()

Mishu
03-24-2012, 07:51 AM
There is no need to define a variable valid. If the test fails simply return false (and preferably then clear the offending field and refocus on it).


There's actually a better way than what you are suggesting and the OP is on the right track.

If the user has made more than one input error, you don't want to tell them the errors one by one which will be annoying to most users. A better approach is to highlight all the errors in one go after submission. At the top of your validation function, set a boolean like dataIsCorrect = true;. Then as you validate each user input, if any is invalid, output an error message to an errors array or append to an errors string and then set dataIsCorrect = false;.

After all the inputs have been validated check if dataIsCorrect = false. If it is then output the errors array or errors string and highlight the invalif input fields in the form. Then return dataIsCorrect ; at the end of the function.

If no errors were encountered then dataIsCorrect still equals true from where it was initially set and the form data is sent away. This way, if the user made more than 1 input error they can see them all in 1 go rather than one at a time. You can highlight the invalid inputs with red asterisks or whatever you like.

Old Pedant
03-25-2012, 05:29 AM
Or even easier (even using my favorite variable name):


function validateForm(form)
{
var oops = "";
if ( ... validate name field fails ... )
{
oops += "\n You must supply a valid name";
}
if ( ... validate email field fails ... )
{
oops += "\n You must supply a valid email";
}
... ditto for other fields ,,,

if ( oops == "" ) return true;

alert("Please correct the following errors:" + oops);
return false;
}

One variable serves both purposes.

Mishu
03-25-2012, 06:10 AM
One variable serves both purposes.

That's very similar to what I posted except you have 2 return statements where I would need only one return statement.

Old Pedant
03-25-2012, 06:18 AM
That's very similar to what I posted except you have 2 return statements where I would need only one return statement.

Yes? And you use two variables where I only use one. Are you one of those that believes that functions should only have one return? Personally, I think that's silly, but if you insist...


function validateForm(form)
{
var oops = "";
if ( ... validate name field fails ... )
{
oops += "\n You must supply a valid name";
}
if ( ... validate email field fails ... )
{
oops += "\n You must supply a valid email";
}
... ditto for other fields ,,,

if ( oops != "" ) { alert("Please correct the following errors:" + oops); }

return oops == "";
}


I agree with you re highlighting inputs in red or some such, but many people don't think that's worth the effort.

The other thing I was showing there is how you can build the error string so it's actually pretty readable even with just an alert. The spaces after the \n characters make it look almost like a bulleted list.

Mishu
03-25-2012, 06:45 AM
Are you one of those that believes that functions should only have one return?

I like to use only 1 unless I must have more. That is easier for me.

Mishu
03-25-2012, 06:52 AM
I agree with you re highlighting inputs in red or some such, but many people don't think that's worth the effort.


I don't normally highlight the inputs in red. I was suggesting the option only.

Philip M
03-25-2012, 12:06 PM
There's actually a better way than what you are suggesting and the OP is on the right track.

If the user has made more than one input error, you don't want to tell them the errors one by one which will be annoying to most users.

I do not agree. IMO it is better to highlight the errors one at a time.

Mishu - your tone and other factors, such as joined 23/3/2012 but 28 posts already, and not providing any contact details in your profile, suggests to me that are you are yet another incarnation of a previously banned member, setting up a new identity in advance of being chucked out yet again. :cool:

I now see that you have been chucked out again (as webdev1958).

Philip M
03-25-2012, 05:15 PM
<script type = "text/javascript"> is also long deprecated but is still used because it allows the script to be run as JScript by browsers that don't support JavaScript (IE8 and earlier).

If you only want the script to run as JavaScript then you can use the correct <script type="application/javascript"> - the only value for the type that isn't deprecated (and hence obsolete and flagged to be completely removed).

Well, there are plenty of people still using IE8 or below. And plenty of 15-year-old code floating about as well.

I expect that <script type = "text/javascript"> will eventually be removed - in say 25 years. <script language=javascript> will probably be removed in 10 years or so. My understanding is that deprecated means disapproved of but still permissible, while obsolete means forbidden and no longer supported at all. So to be precise <script type = "text/javascript"> is deprecated but not obsolete.

Mishu
03-26-2012, 07:30 AM
. So to be precise <script type = "text/javascript"> is deprecated but not obsolete.

That is correct, but since so is language="javascript" then what's wrong if someone uses it since it still works like type = "text/javascript"

Philip M
03-26-2012, 07:39 AM
That is correct, but since so is language="javascript" then what's wrong if someone uses it since it still works like type = "text/javascript"

bullant/webdev1958/Mishu - <script language = "Javascript"> is not required or useful in any situation (although it does actually still work. I suspect it simply defaults to <script> which in turn defaults to Javascript). You yourself have pointed out that that IE v8 and under won't run javascript with <script type="application/javascript">. So deprecated or not it is necessary to use <script type = "text/javascript"> if the code it to work in IE<9 - still a large number of browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum