Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

jl403 · Sep 21st, 2005, 4:31 PM

I need to get some form validation working. I also have a confirmation of order script connected to a submit button, I think the form validation code is being ignored...

Here's the entire code, I've been honestly trying to figure this out for a day and a half and it's pissing me off.. lol. I'm very new to Javascript, any help is hugely appreciated!

So basically I need when I click "Submit" to:

-Check validation, make sure all fields have input
and
-Ask the user whether or not to continue the order, or to cancel the order (This works)

(Toggle Plain Text)

<html>
<head>

<title>Purchase</title>
<link REL="stylesheet" HREF="styles.css" TYPE="text/css">

<script>
function doValidate()
{

if (document.form.name.value == "")
{
alert("Name is a required field.");
document.form1.name.focus();
return false;
}

if (document.form.address.value == "")
{
alert("Address is a required field.");
document.form.address.focus();
return false;
}

if (document.form.province.value == "")
{
alert("Province is a required field.");
document.form.name.focus();
return false;
}

if (document.form.postalcode.value == "")
{
alert("Postal code is a required field.");
document.form.postalcode.focus();
return false;
}

return true;
}
</script>

</head>

<h1 class="store">Welcome to the Office Supply Purchase Page!</h1>

<form onsubmit="return doValidate()" name="form1" method="post" action="mailto:jordonlow@gmail.com">
<p><strong>Name:</strong>
<input type="text" name="name" value="">
<br>
<strong>Address</strong>:
<input type="text" name="address" value="">
<br>
<strong>Province</strong>:
<input type="text" name="province" value="">
<br>
<strong>Postal Code</strong>:
<input type="text" name="postalcode" value="">
<br>
<br>
<strong>Select Item:
</strong><br>
<select name="select">
<option>Cell Phones</option>
<option>Lamps</option>
<option>Calulators</option>
</select>
<br>
<br>
<input name="radiobuttons" type="radio" value="radiobutton" checked>
<strong>Visa</strong>
<input name="radiobuttons" type="radio" value="radiobutton">
<strong>Mastercard</strong> <br>
<br>
<strong>Credit Card Number:</strong>
<input type="text" name="creditcard" value="">
<br>

<!-- Submit confirm Button script -->
<script>function submitter(form)
{
if (confirm('Once you choose Ok, your Order will be Processed'))
{
form.submit();
}
else
{
alert('Cancelling form submission.')
}
}</script>
<input type="button" name="Submit" value="Submit" onClick="submitter(this.form);">
<input type="reset" name="Reset" value="Reset">
<br>
<input name="hiddenField" type="hidden" value="TimeDate">
<br>
<br><i>Today's Date:</i>

<script language="Javascript">

var d = new Date()
document.write("<font face='arial black' color='black'>")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getDate())
document.write(".")
document.write(d.getFullYear())
document.write("</font>")

</script>
</p>
</form>
<p class="store">&nbsp;</p>
</body>
</html>

<html>
<head>

<title>Purchase</title>
<link REL="stylesheet" HREF="styles.css" TYPE="text/css">

<script>
function doValidate()
{

if (document.form.name.value == "")
{
alert("Name is a required field.");
document.form1.name.focus();
return false;
}

if (document.form.address.value == "")
{
alert("Address is a required field.");
document.form.address.focus();
return false;
}

if (document.form.province.value == "")
{
alert("Province is a required field.");
document.form.name.focus();
return false;
}

if (document.form.postalcode.value == "")
{
alert("Postal code is a required field.");
document.form.postalcode.focus();
return false;
}

return true;
}
</script>

</head>

<h1 class="store">Welcome to the Office Supply Purchase Page!</h1>

<form onsubmit="return doValidate()" name="form1" method="post" action="mailto:jordonlow@gmail.com">
<p><strong>Name:</strong>
<input type="text" name="name" value="">
<br>
<strong>Address</strong>:
<input type="text" name="address" value="">
<br>
<strong>Province</strong>:
<input type="text" name="province" value="">
<br>
<strong>Postal Code</strong>:
<input type="text" name="postalcode" value="">
<br>
<br>
<strong>Select Item:
</strong><br>
<select name="select">
<option>Cell Phones</option>
<option>Lamps</option>
<option>Calulators</option>
</select>
<br>
<br>
<input name="radiobuttons" type="radio" value="radiobutton" checked>
<strong>Visa</strong>
<input name="radiobuttons" type="radio" value="radiobutton">
<strong>Mastercard</strong> <br>
<br>
<strong>Credit Card Number:</strong>
<input type="text" name="creditcard" value="">
<br>

<!-- Submit confirm Button script -->
<script>function submitter(form)
{
if (confirm('Once you choose Ok, your Order will be Processed'))
{
form.submit();
}
else
{
alert('Cancelling form submission.')
}
}</script>
<input type="button" name="Submit" value="Submit" onClick="submitter(this.form);">
<input type="reset" name="Reset" value="Reset">
<br>
<input name="hiddenField" type="hidden" value="TimeDate">
<br>
<br><i>Today's Date:</i>

<script language="Javascript">

var d = new Date()
document.write("<font face='arial black' color='black'>")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getDate())
document.write(".")
document.write(d.getFullYear())
document.write("</font>")

</script>
</p>
</form>
<p class="store">&nbsp;</p>
</body>
</html>

DaWei · Sep 21st, 2005, 4:37 PM

You are presuming on your potential respondent's good will by dumping unformatted code directly into an HTML page that eats whitespace. I would suggest you read the forum rules/FAQ and maybe a "How to Post" thread.

shadowhunter · Sep 21st, 2005, 4:40 PM

Quote:

Originally Posted by DaWei

I would suggest you read the forum rules/FAQ and maybe a "How to Post" thread.

I would need to agree with you there. It helps to read the rules behind these things before posting anything.

jl403 · Sep 21st, 2005, 4:58 PM

Sorry, main post edited.

Ooble · Sep 21st, 2005, 5:09 PM

Give each form element IDs:
[html]<input type="text" id="form_address" name="form_address" value="">[/html]
(leave in the name so as not to confuse older browsers).

Then handle each element by ID:

(Toggle Plain Text)

if (document.getElementById("form_address").value == "")

EDIT: That HTML Code highlighter seems to be colour-blind. Sorry about that.

DaWei · Sep 21st, 2005, 5:13 PM

You need to make sure that you post indented code in between the tags or put the tags around code you know to be indented. If you copy unindented code from the page and dump it back between tags, you get nada.

As far as validation is concerned, you usually need to validate more than just the fact that a field contains anything at all. I typically have a set of functions for various kinds of validation: name, username, number, email address, etc. I also don't usually send the user back for a field at a time. I validate the entire form, accumulating bits or bytes to serve as flags for each item that is invalid. I then present the user with a laundry list of things that need to be corrected. That's not as important in client-side validation as it is in server-side validation (which you always need, in addition). It's a matter of personal choice of course, and how you personally feel about such things when you are the user and not the coder.

Were you looking for examples of how to validate certain fields, or what? All you really say is that "it's pissing me off." That's hardly a rational presentation, in terms of generating cogent responses. Someone is just likely to respond, "Well, it would piss me off, too."

jl403 · Sep 22nd, 2005, 1:16 AM

Honestly, this place is too tight assed... You are all intelligent people but my god, pretty intimidating for a programming newbie.

See you, I can get help elsewhere.

Dameon · Sep 22nd, 2005, 1:19 AM

How...appreciative.

playpolly · Sep 22nd, 2005, 1:48 AM

I hope this helps dude. I personally know nothing about Programming but if you can address to my problem please do.

Meanwhile I hope this helps you
http://www.elated.com/tutorials/prog...rm_validation/

DaWei · Sep 22nd, 2005, 7:43 AM

How to Post Questions the Smart Way
If you're the type that needs your mama or your little league coach to periodically pat your butt and tell you you're a good boy, pick your field carefully. You won't survive apprenticeship in a number of them. Oh, and avoid boot camp, too.

Sep 21st, 2005, 4:31 PM	#1
jl403 Newbie Join Date: Sep 2005 Posts: 3 Rep Power: 0	Need help with Form Validation script I need to get some form validation working. I also have a confirmation of order script connected to a submit button, I think the form validation code is being ignored... Here's the entire code, I've been honestly trying to figure this out for a day and a half and it's pissing me off.. lol. I'm very new to Javascript, any help is hugely appreciated! So basically I need when I click "Submit" to: -Check validation, make sure all fields have input and -Ask the user whether or not to continue the order, or to cancel the order (This works) (Toggle Plain Text) <html> <head> <title>Purchase</title> <link REL="stylesheet" HREF="styles.css" TYPE="text/css"> <script> function doValidate() { if (document.form.name.value == "") { alert("Name is a required field."); document.form1.name.focus(); return false; } if (document.form.address.value == "") { alert("Address is a required field."); document.form.address.focus(); return false; } if (document.form.province.value == "") { alert("Province is a required field."); document.form.name.focus(); return false; } if (document.form.postalcode.value == "") { alert("Postal code is a required field."); document.form.postalcode.focus(); return false; } return true; } </script> </head> <h1 class="store">Welcome to the Office Supply Purchase Page!</h1> <form onsubmit="return doValidate()" name="form1" method="post" action="mailto:jordonlow@gmail.com"> <p><strong>Name:</strong> <input type="text" name="name" value=""> <br> <strong>Address</strong>: <input type="text" name="address" value=""> <br> <strong>Province</strong>: <input type="text" name="province" value=""> <br> <strong>Postal Code</strong>: <input type="text" name="postalcode" value=""> <br> <br> <strong>Select Item: </strong><br> <select name="select"> <option>Cell Phones</option> <option>Lamps</option> <option>Calulators</option> </select> <br> <br> <input name="radiobuttons" type="radio" value="radiobutton" checked> <strong>Visa</strong> <input name="radiobuttons" type="radio" value="radiobutton"> <strong>Mastercard</strong> <br> <br> <strong>Credit Card Number:</strong> <input type="text" name="creditcard" value=""> <br> <!-- Submit confirm Button script --> <script>function submitter(form) { if (confirm('Once you choose Ok, your Order will be Processed')) { form.submit(); } else { alert('Cancelling form submission.') } }</script> <input type="button" name="Submit" value="Submit" onClick="submitter(this.form);"> <input type="reset" name="Reset" value="Reset"> <br> <input name="hiddenField" type="hidden" value="TimeDate"> <br> <br><i>Today's Date:</i> <script language="Javascript"> var d = new Date() document.write("<font face='arial black' color='black'>") document.write(d.getMonth() + 1) document.write(".") document.write(d.getDate()) document.write(".") document.write(d.getFullYear()) document.write("</font>") </script> </p> </form> <p class="store"> </p> </body> </html> <html> <head> <title>Purchase</title> <link REL="stylesheet" HREF="styles.css" TYPE="text/css"> <script> function doValidate() { if (document.form.name.value == "") { alert("Name is a required field."); document.form1.name.focus(); return false; } if (document.form.address.value == "") { alert("Address is a required field."); document.form.address.focus(); return false; } if (document.form.province.value == "") { alert("Province is a required field."); document.form.name.focus(); return false; } if (document.form.postalcode.value == "") { alert("Postal code is a required field."); document.form.postalcode.focus(); return false; } return true; } </script> </head> <h1 class="store">Welcome to the Office Supply Purchase Page!</h1> <form onsubmit="return doValidate()" name="form1" method="post" action="mailto:jordonlow@gmail.com"> <p><strong>Name:</strong> <input type="text" name="name" value=""> <br> <strong>Address</strong>: <input type="text" name="address" value=""> <br> <strong>Province</strong>: <input type="text" name="province" value=""> <br> <strong>Postal Code</strong>: <input type="text" name="postalcode" value=""> <br> <br> <strong>Select Item: </strong><br> <select name="select"> <option>Cell Phones</option> <option>Lamps</option> <option>Calulators</option> </select> <br> <br> <input name="radiobuttons" type="radio" value="radiobutton" checked> <strong>Visa</strong> <input name="radiobuttons" type="radio" value="radiobutton"> <strong>Mastercard</strong> <br> <br> <strong>Credit Card Number:</strong> <input type="text" name="creditcard" value=""> <br> <!-- Submit confirm Button script --> <script>function submitter(form) { if (confirm('Once you choose Ok, your Order will be Processed')) { form.submit(); } else { alert('Cancelling form submission.') } }</script> <input type="button" name="Submit" value="Submit" onClick="submitter(this.form);"> <input type="reset" name="Reset" value="Reset"> <br> <input name="hiddenField" type="hidden" value="TimeDate"> <br> <br><i>Today's Date:</i> <script language="Javascript"> var d = new Date() document.write("<font face='arial black' color='black'>") document.write(d.getMonth() + 1) document.write(".") document.write(d.getDate()) document.write(".") document.write(d.getFullYear()) document.write("</font>") </script> </p> </form> <p class="store"> </p> </body> </html> Last edited by jl403; Sep 21st, 2005 at 4:58 PM.

Sep 21st, 2005, 4:37 PM	#2
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	You are presuming on your potential respondent's good will by dumping unformatted code directly into an HTML page that eats whitespace. I would suggest you read the forum rules/FAQ and maybe a "How to Post" thread. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Sep 21st, 2005, 5:09 PM	#5
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	Give each form element IDs: [html]<input type="text" id="form_address" name="form_address" value="">[/html] (leave in the name so as not to confuse older browsers). Then handle each element by ID: (Toggle Plain Text) if (document.getElementById("form_address").value == "") if (document.getElementById("form_address").value == "") EDIT: That HTML Code highlighter seems to be colour-blind. Sorry about that. __________________ Me :: You :: Them

Sep 21st, 2005, 5:13 PM	#6
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	You need to make sure that you post indented code in between the tags or put the tags around code you know to be indented. If you copy unindented code from the page and dump it back between tags, you get nada. As far as validation is concerned, you usually need to validate more than just the fact that a field contains anything at all. I typically have a set of functions for various kinds of validation: name, username, number, email address, etc. I also don't usually send the user back for a field at a time. I validate the entire form, accumulating bits or bytes to serve as flags for each item that is invalid. I then present the user with a laundry list of things that need to be corrected. That's not as important in client-side validation as it is in server-side validation (which you always need, in addition). It's a matter of personal choice of course, and how you personally feel about such things when you are the user and not the coder. Were you looking for examples of how to validate certain fields, or what? All you really say is that "it's pissing me off." That's hardly a rational presentation, in terms of generating cogent responses. Someone is just likely to respond, "Well, it would piss me off, too." __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Sep 22nd, 2005, 1:19 AM	#8
Dameon Troll Join Date: Apr 2005 Location: Texas Posts: 732 Rep Power: 4	How...appreciative. __________________ MD5(sig) = bcef75433db02e9ad9bf81d6f7c5c270

Sep 21st, 2005, 4:58 PM	#4
jl403 Newbie Join Date: Sep 2005 Posts: 3 Rep Power: 0	Sorry, main post edited.

Sep 22nd, 2005, 1:16 AM	#7
jl403 Newbie Join Date: Sep 2005 Posts: 3 Rep Power: 0	Honestly, this place is too tight assed... You are all intelligent people but my god, pretty intimidating for a programming newbie. See you, I can get help elsewhere.

Sep 22nd, 2005, 1:48 AM	#9
playpolly Newbie Join Date: Sep 2005 Posts: 2 Rep Power: 0	I hope this helps man I hope this helps dude. I personally know nothing about Programming but if you can address to my problem please do. Meanwhile I hope this helps you http://www.elated.com/tutorials/prog...rm_validation/

Sep 22nd, 2005, 7:43 AM	#10
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	How to Post Questions the Smart Way If you're the type that needs your mama or your little league coach to periodically pat your butt and tell you you're a good boy, pick your field carefully. You won't survive apprenticeship in a number of them. Oh, and avoid boot camp, too. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Need help with Form Validation script