Form Validation - Newbie

[John Smith]

Hi,

I'm trying to do some very simple form validation and have managed to get
all of the fields checked using :

if (form.firstname.value == "") {
alert("Please include a firstname");
form.firstname.select(); }

in a fuction. This is for an order page on a site so to avoid peopl having
to fill in their address twice ( once for the delivery address and once for
the cardholder's address) I wanted to include a checkbox so that people can
tick it if they are using the same address for both details.

So far so good ! The problem I am having is I need the form validation to
skip the delivery address if the 'My address is the delivery address'
checkbox is ticked. I have tried every-way to make this work and have so far
had no luck. Anybody help shed some light on this one ? Code is below :

<script language="javascript"><!--

function simpleCheck(form) {

if (form.firstname.value == "") {
alert("Please include a firstname");
form.firstname.select(); }

if (form.lastname.value == "") {
alert("Please include a lastname");
form.lastname.select(); }

if (form.email.value == "") {
alert("Please include an email address");
form.email.select(); }

if (form.house.value == "") {
alert("Please include a house number or name");
form.house.select(); }

if (form.street.value == "") {
alert("Please include a street name");
form.street.select(); }

if (form.county.value == "") {
alert("Please include a county");
form.county.select(); }

if (form.postcode.value == "") {
alert("Please include a postcode");
form.postcode.select(); }

if (form.telephone.value == "") {
alert("Please include a telephone number");
form.telephone.select(); }

<!-- delivery alerts -->

function notChecked( box ){
if( form.deliveryadd ){
return true;
}
else{

if (form.firstname2.value == "") {
alert("Please include a delivery firstname");
form.firstname2.select(); }

if (form.lastname2.value == "") {
alert("Please include a delivery lastname");
form.lastname2.select(); }

if (form.email2.value == "") {
alert("Please include a delivery email address");
form.email2.select(); }

if (form.house2.value == "") {
alert("Please include a delivery house number or name");
form.house2.select(); }

if (form.street2.value == "") {
alert("Please include a delivery street name");
form.street2.select(); }

if (form.county2.value == "") {
alert("Please include a delivery county");
form.county2.select(); }

if (form.postcode2.value == "") {
alert("Please include a delivery postcode");
form.postcode2.select(); }

if (form.telephone2.value == "") {
alert("Please include a delivery telephone number");
form.telephone2.select(); }

if (form.delivery_date.value == "") {
alert("Please include a delivery date");
form.delivery_date.select(); }

}

form.method="post";
form.target="_self";
form.action="myform.asp";
form.submit();
}

}

 

[Peter]

You can do it something like this...

function validate() {
var blnOk = true;

blnOk = validateName() && blnOk;
blnOk = validateAddress1() && blnOk;
if (document.rdoAdd[0].checked) {
blnOk = validateAddress2() && blnOk;
}

if (blnOk) {
document.forms[0].submit();
} else {
window.alert("Some error message based on what fields didn't
validate correctly");
}
}

function validateName() {
//Put your code here to validate the name
}

function validateAddress1() {
//Put your code here to validate the first address
}

function validateAddress2() {
//Put your code here to validate the second address
}

If you structure your code like this, it means you can programmatically
decide what you want to validate from the validate function itself.

Peter.

 

[Cathy]

I have a script requirement similar to this.

I am trying to adapt a current feedback form so that depending on
which radio button is selected, depends on how many text fields are
visible / useable.

By this I mean that there are title, name and address text boxes etc
for 1 applicant when first viewing the page, with the '1 applicant'
radio button selected. If the radio button for '2 applicants' is then
selected, duplicate title, name and address text boxes appear / become
useable.

I can hide the text boxes as required, but can't stop the validation
on them.
I have looked at the above script, and can see that this is very near
to what I need. I'm not sure that I am implimenting it correctly into
my script, so I have included a section of my script below.

Can you provide help on what exactly to type into the script and the
body of the page? A detailed response would be most appreciated as I
am still fairly new to Javascript so need as much info as possible ;o)

function ValidateForm(){
var at_pos;
var pd_pos;
var sp_pos;
var em_len;

if (document.form.title.value.length==0)
{
alert("Please enter your title");
document.form.title.focus();
return;
}
if (document.form.firstname.value.length==0)
{
alert("Please enter your first name");
document.form.firstname.focus();
return;
}

if (document.form.title2.value.length==0)='visible';
{
alert("Please enter your title (2nd applicant)");
document.form.title2.focus();
return;
}
if (document.form.firstname2.value.length==0)
{
alert("Please enter your first name");
document.form.firstname2.focus();
return;
}
else
{
document.form.submit();
}
}

<form action="new.asp" method="post" name="form">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="25%" align="left" valign="top">
<p>Title</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname" size="35" maxlength="30">
</td>
</tr>
<tr>
<td colspan="2">visible<input type="radio" name="r1" id="new"
value="" checked
hidden<input type="radio" name="r1" id="new" value="">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>Title2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="title2" size="10" maxlength="20">
</td>
</tr>
<tr>
<td width="25%" align="left" valign="top">
<p>First Name2</p>
</td>
<td align="left" valign="top" width="60%">
<input type="text" name="firstname2" size="35" maxlength="30">
</td>
</tr>
</table>
</form>


Many thanks

 

[Cathy]

Still need your javascript know-how!

Although I posted a reply to my own question (the last post in this
thread), when testing the script further I found that it doesn't work
in Netscape 4.7. I really need this script to work in all browsers.

I would be eternally grateful if someone could show me how to add in
code to my script that will make this work in netscape. I am aware
that I need to do something with <div>s, but am struggling with the
actual code to use. (As still a relative newbie, as much detail as
possible would be fantastic.)

I have tried and tried and tried, but so far no luck. Please help!

 

[John]

I am wondering the same thing. I need a form to have a check box checked
before it can proceed to be submitted and wondering how to go about this.

Thanks in advance,
John

 

[Grant Wagner]

I am wondering the same thing. I need a form to have a check box checked
before it can proceed to be submitted and wondering how to go about this.

Thanks in advance,
John

The simplest thing to do is:

<form onsubmit="return this.elements['yourCheckboxName'].checked;">

However, if you want something a little more informative for the user:

<form onsubmit="return testCheckbox(this);">
<script type="text/javascript">
function testCheckbox(f) {
if (f.elements['yourCheckboxName'].checked) {
return true;
} else {
alert('You must check that checkbox');
return false;
}
}
</script>

Keep in mind this doesn't guarantee /anything/, the user could disable
JavaScript and still submit the form without checking the box, or even figure
out what the appropriate GET would look like and submit the form manually
without every completing a single input on the form.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html