JavaScript - Help With Form Validation And Output Information From A User

Okay, so I've created a JavaScript form which allows the user to enter their name into the form and display it within the sentence, "Welcome to the site ______". It works on one page, but, problem is, I'd like it to be displayed on every page. I'm aware you cannot do this with getElementbyId (can only be used once), which is what I've used. I've tried using getElementsbyClass, but from my understanding, it's not as simple as that.

Here's my code so far anyway:

Code:

<script type="text/javascript">
function inputname(){
	var userInput = document.getElementById('userInput').value;
	document.getElementById('welcome').innerHTML = userInput;
}
</script>

Code:

<p>Welcome to the site <b id='welcome'></b> </p> 
<input type='text' id='userInput' />
<input type='button' onclick='inputname()' value='Enter Name'/>

Hi guys,

Great site by the way =).

Basically if you view http://debtclock.co.uk/contact and click the form submit before inputting any details in the boxes you will see that the boxes highlight red to indicate there are some fields missing.

Everything works fine, but if you view it on I.E 8 you can see that the red fill doesnt appear, only the text above it saying there are errors.

Anyway I hope someone can get back to me with an idea, I am sat here in the office pulling my hair out not having an idea what it could be ><><><

Hi All,

Using Dreamweaver CS4. I have a web form that is submitted and then we pull up the information in excel using delimited fields. The problem with this is the end user will use commas (even though we have messages that say do not use commas) which messes up our data in excel.

I created some code for a different field where commas were more frequent but there are new fields that users are adding commas into.

Anyways, I can't figure out exactly how to code this and was wondering if someone could work out the kinks for me:

My code:

Code:

  
if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 4 )
        oops += "You must enter your Building and Room information.\n"<br>
        var val = frm.ShipToBuildingRoom.value.replace(/[^\d\;\,]/g, "" ).replace(/\,/g, ";");
        frm.ShipToBuildingRoom.value = val;

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

Hello everyone,

I've got a problem while trying to fetch some informations from multiple forms in the same page.
What I'm trying to do with this code is fetching informations from the multiple forms on my page and checking if the information is the information I need.
If so, I take this information and add it into a javascript generated form that I submit once every form in the page have been taken care of.

It's the only way I found to 'submit' multiple forms at the same time.

Everything was fine until I decided to give the user the option to add more forms on the page by clicking on a button (the form is then generated by javascript and appended on the page).

There seems to be a problem when checking these particular forms, the script doesn't seem to recognize the value of the radio button (wich is add_question_faq) and never ever enters in this case. Code:

case "add_question_faq":
        alert ("pourquoi, ho, pourquoi")
        if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
        chaineModif+="StopSendRightNow"
        }
        break;

Except when the commentarised
Code:

//for (h=0;h<mesForms[cpt].elements.length;h++){
//alert (mesForms[cpt].elements[h].name)
//}

ain't commentarised.

Any Idea why a simple alert changes the behavior of the function?


Here's the said function:

Code:

 function select_forms_faq(){

        var chaineModif=""
        var mesFormsModif=new Array();
        var mesForms=document.getElementsByTagName("form");
        
        for (cpt=0;cpt<mesForms.length;cpt++){

        //for (h=0;h<mesForms[cpt].elements.length;h++){
        //alert (mesForms[cpt].elements[h].name)
        //}

        if (mesForms[cpt].action.length!=0 && mesForms[cpt].action.length!=undefined){

        for (k=0;k<mesForms[cpt].action.length;k++){

        if (mesForms[cpt].action[k].checked==true){
        
        switch (mesForms[cpt].action[k].value){
        
        case "delete":
        chaineModif+="<input type=\'text\' name=\'delete_"+mesForms[cpt].id_question.value+"\' value=\'"+mesForms[cpt].id_question.value+"\' />";
        break;
        case "save_changes_question":
        chaineModif+="<input type=\'text\' name=\'update_question_faq_"+mesForms[cpt].id_question.value+"\' value=\'id"+mesForms[cpt].id_question.value+"question"+mesForms[cpt].question.value+"answer"+mesForms[cpt].answer.value+"\' />"
        break;
        case "save_changes_cat":
        chaineModif+="<input type=\'text\' name=\'update_cat_faq_\' value=\'id"+mesForms[cpt].id_cat.value+"category"+mesForms[cpt].cat.value+"\' />"
        break;
        case "add_question_faq":
        alert ("pourquoi, ho, pourquoi")
        if (mesForms[cpt].question.value=="" || mesForms[cpt].answer.value==""){
        chaineModif+="StopSendRightNow"
        }
        break;
        }
        }
        }
        }
        }
        if (chaineModif!="" && chaineModif.indexOf("StopSendRightNow")==-1){
        var formFinal=document.createElement("form")
        with(formFinal){
        method="POST"
        action=""
        name="formFinal"
        id="formFinal"
        style.display="none"
        }
        chaineModif+="<input type=\'hidden\' name=\'submit_changes_faq\' value=\'submit_changes_faq\' />"
        document.getElementById("wpbody-content").appendChild(formFinal)
        document.getElementById("formFinal").innerHTML=chaineModif
        formFinal.submit();
        return false
        }
        else{
        return false
        }
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>Student Information</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

Code:

<SCRIPT type="text/javascript">
<!--
function displayEntries () {
var sfirst = document.frmStudentInfo.textSfirst.value;
var smi = document.frmStudentInfo.textSmi.value;
var slast = document.frmStudentInfo.textSlast.value;
var sadd = document.frmStudentInfo.textSadd.value;
var scity = document.frmStudentInfo.textScity.value;
var sstate = document.frmStudenInfo.textSstate.value;
var szip = document.frmStudentInfo.textSzip.value;
var sphone = document.frmStudentInfo.textSphone.value;
var sdob = document.frmStudentInfo.textSdob.value;

window.alert('sfirst' + 'smi' + 'slast' + '\n' +
'sadd' + '\n' +
'scity' + 'sstate' + 'szip' + '\n' +
'sphone' + '\n' +
'sdob');
}
//-->
</SCRIPT>

</head>
<body>
<table width="70%" align=center ID="Table1">
<tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td>
<td><H3>Student Information</H3></td></tr>
</table>
<form name="frmStudentInfo" action="ignore">
<table align="center">
<tr><td>&nbsp;Last Name:</td>
<td><input type="text" name="txtSlast" size="20"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;First Name:</td>
<td><input type="text" name="txtSfirst" size="20" ></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
<tr><td>&nbsp;MI:</td>
<td><input type="text" name="txtSmi" size="5" tabindex="3"><td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr><td>&nbsp;Address:</td>
<td><input type="text" name="txtSadd" size="20" tabindex="4"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;City:</td>
<td><input type="text" name="SCity" size="20" tabindex="5"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;State:</td>
<td><input type="text" name="txtSstate" size="5" tabindex="6"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

Code:

    <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td>

</tr>
<tr><td>&nbsp;ZIP Code:</td>
<td><input type="text" name="txtSzip" size="20" tabindex="7"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
<tr><td>&nbsp;Phone:</td>
<td><input type="text" name="txtSPhone" size="20" tabindex="8"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</td>
</tr>
<tr><td>&nbsp;Date of Birth:</td>
<td><input type="text" name="txtSdob" size="20" tabindex="9"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>

I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated.

Please assist, I have the following code to remember form inormation but it does not seem to work. Probably something stupid.

Code:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="yorkie.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */

// Confirm resetting of forms.
function confirmReset() {
	var resetForm = confirm("Are you sure you want to reset the form?");
	if (resetForm == true)
	return true;
	return false;
}

// If box clicked value within disappears	
function Focus(element) {
     if (element.value == element.defaultValue) {
       element.value = '';
     }
   }

// If nothing typed and box onblur the default value is restored within 
function Blank(element) {
     if (element.value == '') {
       element.value = element.defaultValue;
     }
   }

// Submission of Contact Form Verified
function verifySubmission() {
var retValue = true;
if (document.forms[2].email.value == "Enter Email Address"
|| document.forms[2].firstname.value == "Enter First Name"
|| document.forms[2].lastname.value == "Enter Last Name"
|| document.forms[2].telephone.value == "Enter Contact number") {
	window.alert("You did not fill in one of the following required fields: First Name, Last Name, Email Address, or Telephone Number.");
	retValue = false;
	}
return retValue;
}

// Email address verified as a valid email address
function validateEmail(formObject) {
var email = formObject.value;
var emailCheck = /^[_\w\-]+(\.[_\w\-]+)*@[\w\-]+(\.[\w\-]+)*(\.[\D]{2,3})$/;
if (emailCheck.test(email) == false) {
window.alert("The e-mail address you entered does not appear to be valid.");
formObject.value = formObject.defaultValue;
return false;
}
formObject.value = email.toLowerCase();
return true;
}

// Telephone number verified as a valid 10 digit number with no alpha characters
function verifyPhone(number) {
var phone = number.value;
var phoneCheck = /^(\d{10})$/;
if(phoneCheck.test(phone) == false) {
window.alert("The telephone number you entered does not appear to be valid.");
number.value = number.defaultValue;
return false;
}
return true;
}

// Show additional contact form details onclick of yes radio button
function showDiv() {
document.getElementById('breeders').style.visibility = 'visible';
}

// Hide certain contact form info onclick of No radio button
function hideDiv() {
document.getElementById('breeders').style.visibility = 'hidden';
}

// SAVE FORM INFORMATION FOR THE NEXT VISIT
function saveSelections(frm) {
		var setvalue;
		var fieldType;
		var index;
		var formname = frm.name;

		// CookieExpiry in 30 days.
		var today = new Date();
		var exp   = new Date(today.getTime()+30*24*60*60*1000);

		var string = "formname=" + formname + "|";
		var cookieName = formname;

		var n = frm.length;
		for (i = 0; i < n; i++)	{
			e = frm[i].name;
			fieldValue = frm[i].value;
			fieldType = frm[i].type;
			
			// Radio Buttons
			if (fieldType == "radio") {
				for (x=0; x < frm.elements[e].length; x++) {
					if (frm.elements[e][x].checked)
					{
					index = x
					}
				}
			string = string + index + "\|";
			}
			
			// Text, Textarea, and dropdowns
			if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
		    	string = string + frm.elements[e].value + "\|";
			}
			
			// Checkboxes
			if (fieldType == "checkbox") {
				if (frm.elements[e].checked==true) {
					var setvalue = "1";
					}
				if (frm.elements[e].checked==false) {
					var setvalue = "0";
					}
			string = string + setvalue + "\|";
			}
			
			// Hidden field
			if (fieldType == "hidden") {
		    	string = string + frm.elements[e].value + "\|";
			}
		}
setCookie(cookieName, string, exp); 
}

// Load Form Fields from saved cookie
function loadSelections(frm) {
var e;
var z;
var x;
var cookieName;
var fieldArray;
var fieldValues;
var fieldValue;

var formname = frm.id;

// Retrieve form elements from cookie and split into array.
cookieName = formname;
fieldValues = getCookie(cookieName);
fieldArray = fieldValues.split("\|");

var n = frm.length;
for (i = 0; i < n; i++) {
	e = frm[i].name;
	z = i;
	z++;
	var fieldType = frm[i].type;
	var fieldValue = fieldArray[z];
	
	// Radio Buttons
		if (fieldType == "radio") {
			x = fieldValue;
			frm.elements[e][x].checked = true;
		}	
	
	// Text, Textarea, and dropdowns
	if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
		frm.elements[e].value = fieldValue;
		}
	
	// Checkboxes
	if (fieldType == "checkbox") {
		var fld_checkbox = fieldValue;
		if (fld_checkbox == "1") {
			frm.elements[e].checked = true;
			}
	}
	
	// Hidden fields
	if (fieldType == "hidden") {
		frm.elements[e].value = fieldValue;
		}
	}
}

// COOKIE FUNCTIONS
function setCookie(name, value, expires) {
document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "");
}

function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/* ]]> */
</script>
</head>

<body class="contact" onload="var begin=setInterval('changeBanner()',9000); currentClock(); currentDate();  document.getElementById('breeders').style.visibility = 'hidden'; " onunload="saveSelections(document.forms[0])">
<table width="92%">

<form action="mailto:lynette@sayorkies.co.za, subject=Contact Form" method="post" enctype="text/plain" onsubmit="return verifySubmission()" onreset="return confirmReset();">
<table class="center" cellpadding="5" border="1">

<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>

<!-- This is for the personal information -->
<tr><td><strong>Tell us who you a </strong></td></tr>
<tr><td><input type="text" name="firstname" size="25" maxlength="35" value="Enter First Name" onfocus="Focus(this);" onblur="Blank(this);" /> * 
<input type="text" name="lastname" style="margin-left: 52px;" size="25" maxlength="35" value="Enter Last Name" onfocus="Focus(this);" onblur="Blank(this);" /> *</td></tr>

<!-- This is for the contact information -->
<tr><td><strong>Your Contact details:</strong></td></tr>
<tr><td><input type="text" name="email" size="30" maxlength="60" value="Enter Email Address" onfocus="Focus(this);" onblur="Blank(this); validateEmail(this)" /> * 
<input type="text" name="telephone" style="margin-left: 20px;" size="20" maxlength="10" value="Enter Contact number" onfocus="Focus(this);" onblur="Blank(this); verifyPhone(this)" /> * </td></tr>

<!-- This is where you enter your message also select what type of message-->
<tr><td><strong>Your Message:</strong></td></tr>
<tr><td align="left">What is your message about?<br />
<input type="radio" name="type" value="compliment" /> Compliment 
<input type="radio" name="type" value="complaint" /> Complaint 
<input type="radio" name="type" value="general" checked="checked" /> General 
<input type="radio" name="type" value="enquiry" /> Enquiry 
<input type="radio" name="type" value="feedback" /> Feedback</td></tr>
<tr><td align="center"><textarea name="message" rows="6" cols="45" onfocus="Focus(this);" onblur="Blank(this)">Enter your message here...</textarea></td></tr>


<!-- Additional information -->
<tr><td align="left">Are you looking to purchase a Yorkie puppy?<br />
<input type="radio" name="purchase" value="yes" /> Yes 
<input type="radio" name="purchase" value="no" checked="checked" /> No</td></tr>

<tr><td align="left">Do you own a Yorkie?<br />
<input type="radio" name="owner" value="yes"  onclick="showDiv()" /> Yes 
<input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
<!-- If answer is no above the below questions are hidden, if yes then they appear -->
<div id="breeders">
How many? <select name="qnty" size="1"> 
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option></select> 
Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes 
<input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>

<!-- Subscriptions -->
<tr><td align="left">Do you wish to subscribe to the following?<br />
<input type="checkbox" name="subscribe" value="letter" checked="checked" /> Monthly Newsletter<br />
<input type="checkbox" name="subscribe" value="pups" /> Notification of a new litter<br />
<input type="checkbox" name="subscribe" value="updates" /> Notification of site updates<br />
<input type="checkbox" name="subscribe" value="register" /> Registrations</td></tr>

<!-- Add a picture file -->
<tr><td align="left">Upload your favourite Yorkie photo for the Picture of the Month.<br />
<input type="file" name="upload" accept="image/gif, image/jpeg" size="30" style="margin-left: 15px; margin-top:5px;" /></td></tr>

<!-- This enters a horizontal line -->
<tr><td><hr /></td></tr>
<tr><td align="center">Required fields marked with *</td></tr>

<!-- Buttons to clear the form or to submit the form -->
<tr><td align="center"><input type="reset" value="Clear the Form" />
<input type="submit" value="Send your message" /></td></tr>

</table></form<script type="text/javascript">loadSelections(document.forms[0]);</script>

</body>
</html>

Console Error: Unable to get value of the property 'split': object is null or undefined
for this line:

Code:

fieldArray = fieldValues.split("\|");

I am hitting a brick wall, dont know what to do?

Attached is the code. It does open the email but does not send any information.
Can someone please assist.

Code:

<!-- Table 2 for the Content -->
<form name="orders" onsubmit="return confirmSubmit()" onreset="return window.confirm('Are you sure you want to reset your Orders.'); " action="mailto:lynette@sayorkies.co.za" method="post" enctype="text/plain">

Code:

// Function to Confirm certain conditions and confirm to proceed with order
function confirmSubmit() {
	var itemsOrdered = true;
	if (document.forms[2].totalExcl.value == 0 || document.forms[2].delivery.value == 0) {
	itemsOrdered = false;
	}
	if(itemsOrdered != true) {
	window.alert("You have not chosen any products to purchase or No Delivery Option selected.");
	return false;
	}
	var submitOrder = window.confirm("Are you sure you want to place the order?");
	if(submitOrder == true)
	return true;
	return false;
	}

// Function to calculate order value 
function calculateValue(orders) {
	var orderValue = 0;
 
	// Run through all the product fields
	for(var i = 0; i < orders.elements.length; ++i) {
 
	// Get the current field
	var formField = orders.elements[i];
 
	// Get the fields name
	var formName = formField.name;
	
	// Is it a "product" field?
        if (formName.substring(0,4) == "prod") {
 
	// Items price extracted from name
	var itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
 
	// Get the Quantity
	var itemQuantity = parseInt(formField.value);
 
	// Update the OrderValue
	if(itemQuantity >= 0) {
	orderValue += itemQuantity * itemPrice;
	}
	}
    }
	
	// Display the totals
    orders.totalExcl.value = "R " + orderValue.toLocaleString();
    
    // function to calculate VAT at 15% as required and total inclusive.
	function calcTotals(oValue) {
	var vat = oValue * .15;
	var totalIncluding = oValue + vat;
	var tDelivery = Number( orders.delivery.value.substring(2) );
	var theTotalOrder = totalIncluding + tDelivery;
	orders.vat.value = "R " + vat.toLocaleString();
	orders.totalIncl.value = "R " + totalIncluding.toLocaleString();
	orders.totalOrder.value = "R " + theTotalOrder.toLocaleString();
	}
	return calcTotals(orderValue);
}

I am creating a website for someone and can get information from one form to check it so it can then change the data in another form.

This what I have for JavaScript:
<script type="text/javascript" language="JavaScript">
function price()
{
if(document.cust.top.value == None &&
document.cust.swirl.value == None)
{
document.price.hosted_button_id.value =
"UDNNKUHTPGEEW";
}
else
{
document.price.hosted_button_id.value =
"CP8EVFLEASF28";
}
}
</script>

The result I want is to take the value from my form that has a radio buttons and check to see if it equal none or not. Then using that information change the value in a different form.

The first form looks like this for beginning:
<form name="cust" method="get" action="">

I've literally tried everything. Read 26 tutorials, interchanged code, etc.

My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

html form:
Code:

<form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
        <table cellspacing="5" style="border: 2px solid black;">
            <tr>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td>*First name</td>
                            <td align="right"><span id="valid_one"></span></td>

                            <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Last name</td>
                            <td align="right"><span id="valid_two"></span></td>

                            <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Email address</td>
                            <td align="right"><span id="result"></span></td>

                            <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Phone number</td>
                            <td align="right"><span id="valid_three"></span></td>

                            <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                        </tr>
                        <tr>
                            <td align="left">*City/Town</td>
                            <td align="right"><span id="valid_four"></span></td>

                            <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <select name="s">
                                    <option value="AL">Alabama
                                    <option value="AK">Alaska
                                    <option value="AZ">Arizona
                                    <option value="AR">Arkansas
                                    <option value="CA">California
                                    <option value="CO">Colorado
                                    <option value="CT">Connecticut
                                    <option value="DE">Delaware
                                    <option value="FL">Florida
                                    <option value="GA">Georgia
                                    <option value="HI">Hawaii
                                    <option value="ID">Idaho
                                    <option value="IL">Illinois
                                    <option value="IN">Indiana
                                    <option value="IA">Iowa
                                    <option value="KS">Kansas
                                    <option value="KY">Kentucky
                                    <option value="LA">Louisiana
                                    <option value="ME">Maine
                                    <option value="MD">Maryland
                                    <option value="MA">Massachusetts
                                    <option value="MI">Michigan
                                    <option value="MN">Minnesota
                                    <option value="MS">Mississippi
                                    <option value="MO">Missouri
                                    <option value="MT">Montana
                                    <option value="NE">Nebraska
                                    <option value="NV">Nevada
                                    <option value="NH">New Hampshire
                                    <option value="NJ">New Jersey
                                    <option value="NM">New Mexico
                                    <option value="NY">New York
                                    <option value="MC">North Carolina
                                    <option value="ND">North Dakota
                                    <option value="OH">Ohio
                                    <option value="OK">Oklahoma
                                    <option value="OR">Oregon
                                    <option value="PA">Pennsylvania
                                    <option value="RI">Rhode Island
                                    <option value="SC">South Carolina
                                    <option value="SD">South Dakota
                                    <option value="TN">Tennessee
                                    <option value="TX">Texas
                                    <option value="UT">Utah
                                    <option value="VT">Vermont
                                    <option value="VA">Virginia
                                    <option value="WA">Washington
                                    <option value="WV">West Virginia
                                    <option value="WI">Wisconsin
                                    <option value="WY">Wyoming
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><span id="error"></span></td>
                        </tr>
                        <tr>
                            <td valign="top">*Anti-Spam Verification</td>
                            <td></td>
                            <td id="reCaptcha"></td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td align="left">*Affiliation</td>
                            <td align="right"><span id="valid_five"></span></td>

                            <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Research Area:</td>
                            <td align="right"><span id="valid_six"></span></td>

                            <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                        </tr>
                        <tr>
                            <td valign="top" align="left">*Research Overview</td>
                            <td align="right"><span id="valid_seven"></span></td>

                            <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                        </tr>
                        <tr>
                            <td align="left">*Talk Availability</td>
                            <td></td>
                            <td>
                                <input type="radio" name="ta" value="In person">In person
                                <input type="radio" name="ta" value="Online">Online
                                <input type="radio" name="ta" value="Both" checked>Both
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">Links</td>
                            <td></td>
                            <td>
                                <table id="linkTable" border="0">
                                    <td><input type="text" style="width: 320px;" name="link"></td>
                                    <td><div id="result"></div></td>
                                </table>
                            </td>
                            <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="color: red;"></span></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" id="submit" name="submit" value="Submit Form">
    </form>

Javascript file:
Code:

/* 
 * script.js - ajax and table functions
 */

var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions

var validAjax = new Boolean();
var validCaptcha = new Boolean();

var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();

function init() {
    showRecaptcha('reCaptcha');

    // Separate booleans for AJAX funcs
    validAjax = false;
    validCaptcha = false;

    // Booleanse for fields that don't require servlet validation
    valid_one = false;
    valid_two = false;
    valid_three = false;
    valid_four = false;
    valid_five = false;
    valid_six = false;
    valid_seven = false;
}

function showRecaptcha(element) {
    Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}

function validate_form() {
    if (valid_one && valid_two && valid_three && valid_four && validEmail) {
        startCaptchaRequest();

        if (validCaptcha) {
            return true;
        }
    }
    else {
        alert("Submission contains errors. Please fill out all required fields before submitting.");
        return false;
    }
}

function validate_one() {
    if (document.getElementById("fn").value == 0) {
        valid_one = false;
        document.getElementById("valid_one").innerHTML = "No";
    }
    else {
        valid_one = true;
        document.getElementById("valid_one").innerHTML = "";
    }
}

function validate_two() {
    if (document.getElementById("ln").value == 0) {
        valid_two = false;
        document.getElementById("valid_two").innerHTML = "No";
    }
    else {
        valid_two = true;
        document.getElementById("valid_two").innerHTML = "";
    }
}

function validate_three() {
    if (document.getElementById("pn").value == 0) {
        valid_three = false;
        document.getElementById("valid_three").innerHTML = "No";
    }
    else {
        valid_three = true;
        document.getElementById("valid_three").innerHTML = "";
    }
}

function validate_four() {
    if (document.getElementById("c").value == 0) {
        valid_four = false;
        document.getElementById("valid_four").innerHTML = "No";
    }
    else {
        valid_four = true;
        document.getElementById("valid_four").innerHTML = "";
    }
}

function validate_five() {
    if (document.getElementById("affl").value == 0) {
        valid_five = false;
        document.getElementById("valid_five").innerHTML = "No";
    }
    else {
        valid_five = true;
        document.getElementById("valid_five").innerHTML = "";
    }
}
//
//function validate_six() {
//    if (document.getElementById("ra").value == 0) {
//        valid_six = false;
//        document.getElementById("valid_six").innerHTML = "No";
//    }
//    else {
//        valid_six = true;
//        document.getElementById("valid_six").innerHTML = "";
//    }
//}
//
//function validate_seven() {
//    if (document.getElementById("ro").value == 0) {
//        valid_seven = false;
//        document.getElementById("valid_seven").innerHTML = "No";
//    }
//    else {
//        valid_seven = true;
//        document.getElementById("valid_seven").innerHTML = "";
//    }
//}

function addLink(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell = row.insertCell(0);
    var element1 = document.createElement("input");

    element1.type = "text";
    element1.name = "link" + rowCount;
    element1.style.width = "320px";

    cell.appendChild(element1);
}

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function createXmlHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    }
}

function startRequest() {
    createXmlHttpRequest();
    
    var param1 = document.getElementById('mailfield').value;

    if (param1 == "") {
        validEmail = false;
        document.getElementById("result").innerHTML = "Blank";
    }
    else {
        xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.send(null);
    }
}

function handleStateChange() {
    if(xmlHttp.readyState==4) {
        if(xmlHttp.status==200) {
            var message =
                xmlHttp.responseXML
                .getElementsByTagName("valid")[0]
                .childNodes[0].nodeValue;
            
            if (message == "Unregistered") {
                validEmail = true;
                document.getElementById("result").style.color = "green";
            }
            else {
                validEmail = false;
                document.getElementById("result").style.color = "red";
            }

            document.getElementById("result").innerHTML = message;
        }
        else {
            alert("Error checking e-mail address - " + xmlHttp.status +
                " : " + xmlHttp.statusText);
        }
    }
}
function createCaptchaRequest() {
    if(window.ActiveXObject) {
        xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp2=new XMLHttpRequest();
    }
}

function startCaptchaRequest() {
    alert('made it to captcha requeswt');
    createCaptchaRequest();

    var param1 = Recaptcha.get_challenge();
    var param2 = Recaptcha.get_response();

    xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
    xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
    xmlHttp2.send(null);
}

function handleStateChangeCaptcha() {
    if(xmlHttp2.readyState==4) {
        if(xmlHttp2.status==200) {
            var message =
                xmlHttp2.responseXML
                .getElementsByTagName("result")[0]
                .childNodes[0].nodeValue;

            if (message == "Valid") {
                alert("captcha valid");
                validCaptcha = true;
            }
            else {
                document.getElementById("error").innerHTML = message;
                validCaptcha = false;
            }
        }
        else {
            alert("Error checking captcha validity - " + xmlHttp2.status +
                " : " + xmlHttp2.statusText);
        }
    }
}

I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong?

here is my code so far...
Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok.

Code:

....
<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
	function validate(form)
	{
		var form = document.getElementById("reg");
		var e = document.getElementById("error");
		e.style.background = "red";
		
		for(var i = 0; i < form.elements.length; i++)
		{
			var el = form.elements[i];
			if(el.type == "text" || el.type == "password")
			{
				if(el.value == "")
				{
					e.innerHTML = "Please fill in all fields!";
					el.style.border = "1px solid red";
					el.focus();
					return false;
				} else {
					el.style.border = "1px solid green";
					return false;
				}
			}
		}
		var un = form.username;
		un.value = un.value.replace(/^\s+|\s+$/g,"");
		if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
		{
			e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
			un.focus();
			return false;
		}
		var pw = form.password;
		pw.value = pw.value.replace(/^\s+|\s+$/g,"");
		if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
		{
			e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
			pw.focus();
			return false;
		}
		e.innerHTML = "You filled in all the fields, well done!";
		e.style.background = "green";
		return false;
	}
</script>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<h1>My Cool Website</h1>
    </div>
    <div id="content">
		<div class="padding">
       	  <h2>Registration</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
	    <div id="error"></div>
		<div><label for="username">Username</label></div>
    			<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
		<div><label for="password">Password</label></div>
    			<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
        <div><label for="c_password">Confirm Password</label></div>
                <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
        <div><label for="email">Email address</label></div>
                <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
        <div><label for="c_email">Confirm Email address</label></div>
                <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
        <div><label for="firstname">First name</label></div>
                <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
        <div><label for="surname">Surname</label></div>
                <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
        <div><label for="gender">Gender</label></div>
                <div>
                    <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
                    <div><input type="radio" name="gender" value="f" />Female</div>
                </div>
                <div><input type="submit" value="Register" name="submit" /></div>
          </form>
		</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 My Cool Website</p>
    </div>
</div>
</body>
</html>

Hi,
I have a working contact form with 3 of the fields requiring validation and they work well.
I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them.
My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag.
Can anyone give me any help and advice as to how to accomplish this?
Many thanks
Code below....

Code:

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script

>


Code:

<form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
      <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="54%" class="subHeader">Full Name* </td>
          <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Company Name </td>
          <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Address</td>
          <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
        </tr>
        <tr>
          <td class="subHeader">Postcode</td>
          <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
        </tr>
        <tr>
          <td class="subHeader">Telephone Number* </td>
          <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
        </tr>
        <tr>
          <td class="subHeader">Mobile Number </td>
          <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
        </tr>
        <tr>
          <td height="25" class="subHeader">Email Address* </td>
          <td class="subHeader"><input name="Email" type="text" id="Email" /></td>
        </tr>
        <tr>
          <td height="30" class="subHeader">Status*</td>
          <td class="subHeader"><select name="StatusClass" id="StatusClass">
            <option selected="selected">Please Choose</option>
            <option>Architect</option>
            <option>Interior Designer</option>
            <option>Private Client</option>
            <option>Student</option>
            <option>Trade Enquiry</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="23" class="subHeader">Project*</td>
          <td class="subHeader"><select name="Project" size="1" id="Project">
            <option selected="selected">Please Choose</option>
            <option>Planning Stages</option>
            <option>New Build</option>
            <option>Refurbishment</option>
            <option>Barn Conversion</option>
            <option>No project - information only</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="37" class="subHeader">How did you hear about us?*</td>
          <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
            <option selected="selected">Please Choose</option>
            <option>Web Search</option>
            <option>Grand Designs</option>
            <option>Living Etc</option>
            <option>Home Building &amp; Renovation</option>
            <option>Architect</option>
            <option>Friend/Family</option>
            <option>Magazine/Editorial</option>
            <option>Newspaper Article</option>
            <option>Trade Show/Exhibition</option>
            <option>Other</option>
          </select></td>
        </tr>
        <tr>
          <td height="24" class="subHeader">Brochure Request </td>
          <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
        </tr>
        <tr>
          <td class="subHeader">Message</td>
          <td class="subHeader"><span class="style4">
            <textarea name="Message" id="Message"></textarea>
          </span></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
        </tr>
        <tr>
          <td colspan="2" class="subHeader"><em>* Required fields</em></td>
        </tr>
      </table>
	  </form>

Hello all,

I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed.

I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution.

Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go).

Cheers!
-Dave

The Javascript:
Code:

$(function validateForm(){
		
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'email',
			'phone'  :  '(555) 123-4567',
			'other'  :  'other',
			'detail'  :  'project overview'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
    $('input#phone').inputfocus({ value: field_values['phone'] });
	$('input#other').inputfocus({ value: field_values['other'] });
	$('input#detail').inputfocus({ value: field_values['detail'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){  });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#first_step input[type=text]');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
        
        if(error <= 0) {   
                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();                 
        } else 
			return false;
    });

	$('#back_second').click(function(){

                //update progress bar
                $('#progress_text').html('0% Complete');
                $('#progress').css('width','0px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#first_step').slideDown();     

    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');
 
        var fields2 = $('#second_step input[textarea]');
        var error = 0;
        fields2.each(function(){
			var value = $(this).val();
			
            if( value.length<5 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }	
		});	
		
        if(error <= 0) { 
                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();     
        } else 
			return false;

    });

	$('#back_third').click(function(){

                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#third_step').slideUp();
                $('#second_step').slideDown();     

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('75% Complete');
        $('#progress').css('width','255px');

        //prepare the fourth step
		var fields3 = new Array(
			$('#time').val(),  
			$('#budget').val()             
        );
		var fields2half = new Array(
			$('#detail').val()
		);
		var fields2 = new Array(
            $('#other').val(),   
			$('#pages').val()		
		);	

		var fields1 = new Array(
            $('#name').val(),
            $('#email').val(),
            $('#phone').val(),
            $('#contact').val(),
            $('#url').val()
		);
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
			$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
			$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
			$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
        });
                
        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();            
    });

	$('#back_fourth').click(function(){

                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#fourth_step').slideUp();
                $('#third_step').slideDown();     

    });

    $('#submit_fourth').click(function(){
        //send information to server

		        //update progress bar
                $('#progress_text').html('100% Complete');
                $('#progress').css('width','339px');
                
                //slide steps
                $('#fifth_step').slideUp();
                $('#fourth_step').slideDown(); 
				
		if(error <= 0) {        	
        	return true
    	}
    	else{
    		return false
    	}
				  
    });

});

Hi guys,

Been stuck for a few days with this scenario.
Any help?
The alert box appears on an error.
But the submitting won't stop.
The details are submitted and the form is processed.
Any help is greatly appreciated...

Code:

    <html>
    <head>
    <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "simple"
        });
    </script>
    <script language="javascript">
     
    function MM_openBrWindow(theURL,winName,features) {
        window.open(theURL,winName,features);
    }
    function err_check(){
        var email = document.getElementById('to_email').value;
        if(email.length==0){
            alert('Please Enter Email Address');
            return false;
        }
        var AtPos = email.indexOf("@")
        var StopPos = email.lastIndexOf(".")
        if (AtPos == -1 || StopPos == -1) {
            alert("Please Enter Valid Email Address");
            document.getElementById('email').focus();
            return false;
        }
        email = document.getElementById('cc_email').value;
        if(email.length != 0){
            var AtPos = email.indexOf("@")
            var StopPos = email.lastIndexOf(".")
            if (AtPos == -1 || StopPos == -1) {
                alert("Please Enter Valid Email Address");
                document.getElementById('email').focus();
                return false;
            }
        }
        var answer = confirm ("Send E-Mail?");
        if (!answer){
            return false;
        }
    }
    </script>
    <!-- /TinyMCE -->
     
     
    <style type="text/css">
    body, table, td, th{
        background-color:#CCCCCC;
        font-family: Arial;
        font-size:14px;
    }
    .que{
        font-weight:bold;
    }
    </style>
    </head>
    <body>
    <form method="post" enctype="multipart/form-data">
    <?php
    include 'library/database.php';
    include 'library/opendb.php';
    $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $from_email = $row[0];
    $from_person = $row[1];
    $from_mobile = $row[2];
    $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $cusid = $row[0];
    $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $toer = $row[0];
    include 'library/closedb.php';
    ?>
    <table width="100%" border="0">
    <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
    <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
    <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
    <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
    <tr><td rowspan="1" colspan="2">&nbsp;</td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
    </tr>
    <tr>
    <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
    <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
    <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
     
    <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
    <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments&nbsp;&nbsp;<input id="upload_file" name="upload_file" type="file"/> </td></tr>
     
    <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
        <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
        <?php
         echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; 
          ?>
        </textarea>
    </td></tr>
    </table>
    </form>
    </body>
    </html>

I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is.

Here is the code.

Code:

// BEGIN JAVASCRIPT
$(function(){
	
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'your email',
			'yourmessage'  :  'I would like to inquire about'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });

    //form validation
    $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
    $('#submit').click(function(){
        //remove classes
        $('#sendamessage input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error'); // css class
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid'); // css class
            }
        });     
        
        if(!error) {
        	// this is where I get confused. How do I make this send the form?
        	alert('Data sent');
    		});
        } 						
    }); 	
});
// END JAVASCRIPT


        <form method="post" action="" onsubmit="return validateForm()" >
			<input type="hidden" name="ccf_customhtml" value="1" />
			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
			<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
            <input type="hidden" name="required_fields" value="" />

            	<label for="name">Name</label>
            		<input type="text" name="name" id="name" value="your name" /> 
            
            	<label for="email">Email</label>
            		<input type="text" name="email" id="email" value="your email" /> 
            
            	<label for="yourmessage">Your Message</label>
            		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>

            		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
        </form>

I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent.

Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page.

Cheers!
-Dave