Javascript issue

jjjade · 29-04-2010 6:26am #1

for all you programmers i know that this problem is so simple to fix but i just cant do javascript (its a college requirement) can someone help me with my xhtml login function with javascript?

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function validatePwd() {
var pw1 = document.myForm.password.value;
var pw2 = document.myForm.password2.value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your username and password.');
return false;
}

else {
if ((pw1 != 'username')||(pw2!='password')) {
alert ("incorrect.");
return false;
}
else {
alert('Nice job.');
return true;
}
}
}

</SCRIPT>
</HEAD>

<BODY>

<center>
<form id= "myForm" onSubmit="return validatePwd()">
Enter your password twice.
<br>
(At least 6 characters, 12 characters max, and spaces are not allowed.)
<p>
Password: <input type=password name=password maxlength=12>
<br>
Verify password: <input type=password name=password2 maxlength=12>
<p>
<input type=submit value="Submit">
</form>
</center>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body></html>

Freddio · 29-04-2010 7:46am

You need to change

id= "myForm"

to

name= "myForm" in your form tag

smcelhinney · 29-04-2010 8:58am

or use

document.getElementById('myForm')

instead.

Also, you should use CODE tags when posting.

jjjade · 29-04-2010 1:27pm

i read that form name = is for html and id is for xhtml am i wrong?

Eoin · 29-04-2010 6:09pm

form name is deprecated in (X)HTML, but ID should work fine for both.

jjjade · 29-04-2010 10:24pm

hey guys

i havent got a clue. i am doing an assignment for college and have to do a mobile website using xhtml mp. the java will not work for the love of money.... is javascript aloud in xhtml

like im finding sample code and its not working. eg

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>


<style type="text/css">
body {background:#FF99FF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>

<script type ="text/javascript">
<![CDATA[






]]>
</script>
</head>

<body>

<center>
<form id=myForm onSubmit="return validatePwd()">
Enter your password twice.
<br>
(At least 6 characters, 12 characters max, and spaces are not allowed.)
<p>
Password: <input type=password name=password maxlength=12>
<br>
Verify password: <input type=password name=password2 maxlength=12>
<p>
<input type=submit value="Submit">
</form>
</center>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center></body></html>

please some1 help

Freddio · 29-04-2010 10:36pm

Here you go

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>


<style type="text/css">
body {background:#FF99FF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>

<script language="javascript">

function validatePwd()
{
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.getElementById("password").value;
var pw2 = document.getElementById("password2").value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your password twice.');
return false;
}
// check for minimum length
if (document.getElementById("password").value.length < minLength) {
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
// check for spaces
if (document.getElementById("password").value.indexOf(invalid) > -1) {
alert("Sorry, spaces are not allowed.");
return false;
}
else {
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}
else {
alert('Nice job.');
return true;
}
}
}

</script>
</head>

<body>

<center>
<form id=myForm onSubmit="return validatePwd()" method="post">
Enter your password twice.
<br>
(At least 6 characters, 12 characters max, and spaces are not allowed.)
<p>
Password: <input type="password" name="password" id="password" maxlength=12>
<br>
Verify password: <input type="password" name="password2" id="password2" maxlength=12>
<p>
<input type=submit value="Submit">
</form>
</center>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center></body></html>

jjjade · 29-04-2010 11:33pm

hey thank you for that

i am doing xhtml for my project and this doesnt work under that keeps giving error.

i have done this and there is no errors

but bad news is the error messages arent displaying for my password validation if successful or not. save this code as eg test.xhtml to see results.

some1 help please

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>


<style type="text/css">
body {background:#FF99FF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>

<script type ="text/javascript">
<![CDATA[






]]>
</script>
</head>

<body>

<form name="myForm" onSubmit="return validatePwd()">
Enter your password twice.

(At least 6 characters, 12 characters max, and spaces are not allowed.)

<p><label accesskey="u">Password: <input type="password" name="password"/></label></p>
<p><label accesskey="p">Password2: <input type="password" name="password2"/></label></p>
<input type="submit" value="Submit">

</input>
</form>
</body>
</html>

jjjade · 30-04-2010 1:37pm

can any1 help

Eoin · 30-04-2010 1:58pm

It's because of your JavaScript comments. I just took them out as I can't remember off the top of my head what the proper syntax is.

Some tips:

Use an input button to test the function first so the form isn't submitted. If the JavaScript is broken and you have it running when the form is submitted, then the page will just be submitted and give you less chance of diagnosing the problem.

Download the web developer / firebug toolbar for Firefox so you can easily identify where the issues are.

Use either [html] or

tags when posting here, as it will make it a lot easier for others to help you.

By the way, this would be a simplified version:

[code]
if ((pw1 != pw2) || pw1 == "")
{
	alert("Please enter matching values");
	return false;
}
alert("done");
return true;

[html]
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>


<style type="text/css">
body {background:#FFF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>

<script type ="text/javascript">

function validatePwd()
{
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.myForm.password.value;
var pw2 = document.myForm.password2.value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}
else
{
if (pw1 != pw2)
{
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}
else
{
alert('Nice job.');
return true;
}
}
}
</script>
</head>

<body>
<form name="myForm" onSubmit="return validatePwd()">
Enter your password twice.

(At least 6 characters, 12 characters max, and spaces are not allowed.)

<p><label accesskey="u">Password: <input type="password" name="password"/></label></p>
<p><label accesskey="p">Password2: <input type="password" name="password2"/></label></p>
<input type="submit" value="Submit"></input>
<input type="button" value="test" onclick="validatePwd()" />
</form>
</body>
</html>
[/html]

jjjade · 30-04-2010 4:16pm

hey eoin

thank you for your efforts really appreciate it. this is to be in xhtml and i have copied down your work and saved as test.xhtml and it displays and enters ok but the alerts arent popping up to tell me im right or wrong any ideas?

thank you

Eoin · 30-04-2010 4:21pm

It should just be called test.html - no need for the x.

You will need to make some changes to make it valid (X)HTML. Go to this site: http://validator.w3.org/ and start correcting the errors.

If the alerts aren't popping up, then it might be a security setting on your browser, or there might be an issue with the JavaScript.

The best thing to do is put an alert() at the start of the JavaScript. If it pops up, then put it in different places in the code to see when it stops appearing.

Also - install the tools I told you about.

jjjade · 30-04-2010 4:36pm

hey i put an alert before the function after the function and in the function

the one in the function arent running, im using your simple code. any ideas?

<script type ="text/javascript">

alert("2");
function validatePwd()
{
alert("1");
var pw1 = document.myForm.password.value;
var pw2 = document.myForm.password2.value;
alert("3");
if ((pw1 != pw2) || pw1 == "")
{
alert("Please enter matching values");
return false;
}
alert("done");
return true;
}
alert("4");

</script>

Eoin · 30-04-2010 4:45pm

Please use the [code] tag to make it easier for us to look at your code. It keeps the indentation which is far easier to read.

If alert("1") isn't working, but alert("2") is then it looks like the function isn't being triggered.

Have you downloaded either of those tools I mentioned? They would give you the exact error.

smcelhinney · 30-04-2010 5:10pm

Silly question, but are you testing this on mobile or web?

jjjade · 30-04-2010 5:26pm

hey

i am creating a xhtml mp. i am testing it on the pc but eventually it will be tested on the ph... the code with out the java has been tested and presents itself ok on the ph. just taught id do javascript on the pc first. ok this is what i got so far. alert 1 and 5 are presented when pg loaded. alert 2 when click on button followed by 1 and 5. save the file as eg test.xhtml and see were i am going wrong.

thank you all

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>


<style type="text/css">
body {background:#FFF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>

<script type ="text/javascript">
<![CDATA[

alert("1");
function validatePwd()
{
alert("2");
var pw1 = document.myform.password.value;
alert("3");
var pw2 = document.myform.password2.value;
alert("4");
if ((pw1 != pw2) || pw1 == "")
{
alert("Please enter matching values");
return false;
}
alert("done");
return true;
}
alert("5");
]]>
</script>
</head>

<body>
<form id="myform" >
enter your password twice.

<p><label accesskey="u">Password: <input type="password" id="password"/></label></p>
<p><label accesskey="p">Password2: <input type="password" id="password2"/></label></p>
<input type="submit" value="Submit" onclick="validatePwd()"/>
<input type="button" value="test" onclick="validatePwd()" />
</form>
</body>
</html>

Eoin · 30-04-2010 5:40pm

yeah, I was wondering the same given the doctype.

Can you please put the markup in [code] or [html] tags please? Seriously, it's a pain looking at it as it is.

just like this:

[noparse]
[html]
my html goes here.
[/html]
[/noparse]

Edit - your markup works fine on Chrome, firefox and IE on my machine.

Edit2 - why are you saving it as .xhtml?

jjjade · 30-04-2010 5:46pm

hey it is showing up ok on chrome and firefox but the java isnt doing wat its suppose to

Eoin · 30-04-2010 5:48pm

try replacing this:
var pw1 = document.myform.password.value;
with this:
var pw1 = document.getElementById("password").value;

jjjade · 30-04-2010 6:03pm

ok did that and it presented me alert3 and 4. it now wont give me the results of the if statement false or true, what ever alert is connected.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

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

<head>

<title>Valentine</title>

<script type ="text/javascript">//<![CDATA[

alert("1");
function validatePwd()
{
alert("2");
var pw1 = document.getElementById("password").value;
alert("3");
var pw1 = document.getElementById("password2").value;
alert("4");
if ((pw1 != pw2) || pw1 == "")
{
alert("Please enter matching values");
return false;
}
alert("done");
return true;
}
alert("5");
//]]>
</script>


<style type="text/css">
body {background:#FFF; color: #330000; margin:0px; padding:0px; }
a {text-decoration:none}
.top { background: #000099; margin: 0px; padding: 0px}
.footer { background: #ff66ff;
border-top: #996699 solid 1px;
border-bottom: #996699 solid 1px;
margin: 0 0 0 0; }
hr { border:solid; border-width:1px; border-color:#336666;}
</style>
</head>

<body>
<form id="myform" onsubmit="return validatePwd()">
enter your password twice.

<p><label accesskey="u">Password: <input type="password" id="password"/></label></p>
<p><label accesskey="p">Password2: <input type="password" id="password2"/></label></p>
<input type="submit" value="Submit" />
<input type="button" value="test" onclick="validatePwd()" />
</form>
</body>
</html>

Eoin · 30-04-2010 6:55pm

This might be it:
var pw1 = document.getElementById("password2").value;
that should be
var pw2 = document.getElementById("password2").value;

Once again, can you please put your HTML inside of tags so it's displayed properly - you've been asked 4 times now. All you have to do is this:

[noparse]
[html]
copy and paste your HTML here.
[/html]
[/noparse]

Did you install any of the toolbars I recommended?

jjjade · 30-04-2010 7:10pm

sorry, i installed firebug and the thing isn't helpful as technically there is no error s as its displaying

with the java it sees to going to the if statement skipping it
and going back to the start with 1

when running it goes alerts 1, 5
enter in passwords 2,3,4,1,5

it is skipping the if function for some reason , why would this be?

Eoin · 30-04-2010 7:31pm

Did you make the change I suggested?

jjjade · 30-04-2010 7:47pm

omg eoin you are a star

do you no what i did

1.alert("2");
2.var pw1 = document.getElementById("password").value;
3.alert("3");
4.var pw1 = document.getElementById("password2").value;
5.alert("4");

line four is stating a var for pw1 which is a type up on my part, this should be pw2

the reason why it skipped the if statement as pw2 wasnt declared anywhere

so i changed this and now it works!!!!!!

OMG i owe you big time like big time!!!!! pints and cigarettes just let me know

you have been so helpful A+++ i will be on again before monday i still have lots more to do

Eoin · 30-04-2010 7:50pm

jjjade wrote: »

omg eoin you are a star

do you no what i did

1.alert("2");
2.var pw1 = document.getElementById("password").value;
3.alert("3");
4.var pw1 = document.getElementById("password2").value;
5.alert("4");

line four is stating a var for pw1 which is a type up on my part, this should be pw2

the reason why it skipped the if statement as pw2 wasnt declared anywhere

so i changed this and now it works!!!!!!

I told you that earlier!

Glad to hear it's all working now.

jjjade · 30-04-2010 8:05pm

i was stressed out i probably didnt see it with all the posts

jjjade · 02-05-2010 9:05pm

right im back !!!

just a little problem i think cant get this to work its giving me the error message if i enter in Mastercard or Visa

var cardtype = document.getElementById("cardType").value;

alert("3")
if ((cardtype !="Mastercard")||(cardtype !="Visa"))
{
alert("Failed enter card type correctly");
return false;
}

can someone help me?

sorted never mind

jjjade · 03-05-2010 4:56pm

again im back. can someone help me with the code below the form when submit is clicked doesnt seem to go through the javascript but straight to the next page. can some1 help me oh this is xhtml

thank you

<script type ="text/javascript">
//<![CDATA[
function abc()
{
alert("2")

alert("3")

if (cardForm.eMail.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.pHone.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.username.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.password.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}
else
{
alert("success");
document.location="Login.xhtml";
return true;

}

}
//]]>
</script>
</head>

<body>
<form id="cardForm" onsubmit="return abc();" action="Login.xhtml">

<p>Registration Form</p>

<p> Email:
<input id="eMail" size="25"/></p>

<p>Phone Number:
<input id="pHone" size="10"/></p>

<p>Username:
<input id="username" size="10"/></p>

<p>Password:
<input id="password" type="password" maxlength="10" size="10"/></p>

<p><input type="submit" value="Confirm"/>
<input type="reset" value="Clear"/></p>


</form>

</body>
</html>

Eoin · 03-05-2010 5:10pm

Would you please use HTML or CODE tags if you want people to help you.

jjjade · 03-05-2010 5:20pm

ok..... it is in html code..... you can code with <> or [] i taught. college teaches <> in html/xhtml and it goes throught the xhtml validator ok. in the form it goes straight to the action page when submit is clicked.... avoids java script

can you help

[script type ="text/javascript"]
//<![CDATA[
function abc()
{
alert("2")

alert("3")

if (cardForm.eMail.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.pHone.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.username.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}

else if (cardForm.password.value.length < 6)
{
alert("Failed enter card num correctly");
return false;

}
else
{
alert("success");
document.location="Login.xhtml";
return true;

}

}
//]]>
[/script]
[/head]

[body]
[form id="cardForm" onsubmit="return abc();" action="Login.xhtml"]

<p>Registration Form</p>

<p> Email:
<input id="eMail" size="25"/></p>

<p>Phone Number:
<input id="pHone" size="10"/></p>

<p>Username:
<input id="username" size="10"/></p>

<p>Password:
<input id="password" type="password" maxlength="10" size="10"/></p>

<p><input type="submit" value="Confirm"/>
<input type="reset" value="Clear"/></p>


[/form]

Eoin · 03-05-2010 5:23pm

No, I mean you put it in [HTML] or [code] tags here, so we don't just see a massive block of text. Like I showed you in posts 17 and 21. It will then look like my code in post 10.

Javascript issue

Comments