Hi, I'm new to JavaScript and while doing college work i have to create a form with validation, so far the Validation works but when click on the Submit key after all the correct information has been inputted the form does not go to *Untitled-2.html* and i can't seem to find out why please help me. I hope its not a completely silly reason why its not working but the help will be very much appreciated
Code is:
Code:
<title>Untitled Document</title>
<style type="text/css">
<!--
-->
</style>
<link href="Main Sheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function resizeAll(){
var viewwidth;
var viewheight;
var viewwidthhalf;
var viewheighthalf;
var obj=document.getElementById("Tester");
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewwidth = window.innerWidth,
viewheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewwidth = document.documentElement.clientWidth,
viewheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewwidth = document.getElementsByTagName('body')[0].clientWidth,
viewheight = document.getElementsByTagName('body')[0].clientHeight
}
viewwidthhalf = viewwidth / 2;
viewheighthalf = viewheight / 2;
console.log(viewwidth,viewwidthhalf,viewheight,viewheighthalf);
//obj = document.getElementByClass('Form_Box_2');
obj.style.paddingLeft = (viewwidthhalf-125)+"px";
obj.style.paddingTop = (viewheighthalf-300)+"px";
//-->
}
function ValidateForm()
{
var x=document.forms["MyForm"]["First Name"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
var x=document.forms["MyForm"]["Last Name"].value;
if (x==null || x=="")
{
alert("Last name must be filled out");
return false;
}
var x=document.forms["MyForm"]["Address"].value;
if (x==null || x=="")
{
alert("Address must be filled out");
return false;
}
var x=document.forms["MyForm"]["Postcode"].value;
if (x==null || x=="")
{
alert("Postcode must be filled out");
return false;
}
var x=document.forms["MyForm"]["Email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
alert("Email must be filled out");
return false;
return ture;
}
//-->
</script>
</head>
<body onload="resizeAll()" onresize="resizeAll()">
<div Id="Tester">
<Form id="MyForm" onsubmit="return ValidateForm()" action="Untitled-2.html" method="post" >
<p><lable for="Title">Title</lable><br/>
<select id="Dropdown" name=select1>
<option>Pick On</option>
<option>Mr</option>
<option>Miss</option>
<option>Mrs</option>
<option>Dr</option>
<option>Master</option>
</select>
<p><label for="First Name">First Name</label><br/>
<input type="text" name="First Name" value="" id="First Name" style="width:244px;" /></p>
<p><label for="Last Name">Last Name</label><br/>
<input type="text" name="Last Name" value="" id="Last Name" style="width:244px;" /></p>
<p><label for="Address">Address</label><br/>
<input type="text" name="Address" value="" id="Address" style="width:244px;" /></p>
<p><label for="Postcode">Postcode</label><br/>
<input type="text" name="Postcode" value="" id="Postcode" style="width:244px;" /></p>
<p><label for="Phone Number">Phone Number</label><br/>
<input type="text" name="Phone Number" value="" id="Phone Number" style="width:244px;" /></p>
<p><label for="Email">Email</label><br/>
<input type="text" name="Email" value="" id="Email" style="width:244px;" /></p>
<p><label for="Favourite Ride">Favourite Ride</label><br/>
<select id="Dropdown" name=select1>
<option>Pick On</option>
<option>Ride 1</option>
<option>Ride 2</option>
<option>Ride 3</option>
<option>Ride 4</option>
<option>Ride 5</option>
</select>
<p><input type="submit" value="Submit"/></p>
</form>
</div>
</body>
</html>
function ValidateForm()
{
var x=document.forms["MyForm"]["First Name"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
var x=document.forms["MyForm"]["Last Name"].value;
if (x==null || x=="")
{
alert("Last name must be filled out");
return false;
}
var x=document.forms["MyForm"]["Address"].value;
if (x==null || x=="")
{
alert("Address must be filled out");
return false;
}
var x=document.forms["MyForm"]["Postcode"].value;
if (x==null || x=="")
{
alert("Postcode must be filled out");
return false;
}
var x=document.forms["MyForm"]["Email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
alert("Email must be filled out");
return false;
return ture;
}
Have a look at that final return value, and tell me if that is exactly what you have in your live code - in other words is that typo from the original, or just from copying into here?
I think i got a little confused in your answer, that code is copy - paste from the Original code, and what I'm hoping for the code to do is after the validation's have been made, and are all filled in, to redirect to *Untitled-2.html* but this wont happen, Hope this Clarifies your question.
Some advice, if I may. Don't use an individual alert for each and every incorrect entry. Set a variable called warn to "", and for each incorrect entry:
Code:
warn += "New message for correcting.\n";
Then at the end of the function, if warn == "", return true, else alert(warn) and return false.
Also, at the end of the function you currently have return true spelled as return ture, and it immediately follows the return false with no closing } between them.
Another thing - web documents should not have spaces in the name.
<link href="Main Sheet.css" rel="stylesheet" type="text/css" />
Change the filename to Main_Sheet.css, or Main-Sheet.css, or MainSheet.css, and then correct the href accordingly.
Thank you both for the hlpe i didn't fully understand why not to use an Alert for each one, but im still new to this so im ok with that, after looking very closely to the {} i saw that like you said the *return ture* was not seperated by {}, after placing this in the code works fine now and when all the information has been placed in goes to the next page
but the help will be very much appreciated
Reply With Quote
Originally Posted by Sniperzown1
Bookmarks