JavaScript - Checked/unchecked Form Validation

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>

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>

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
    	}
				  
    });

});

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>

Hello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank.

I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code.
Code:

<script type="text/javascript"> 
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
	formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	//document.writeln(formArray[i] + "<br />");
	var sDataName = formArray[i].split("=")
	
switch (sDataName[0]) {

case ".lib_use":
     for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
     if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
     document.getElementsByName(".lib_use").item(j).checked = true;
     //alert("lib_use set");
              }
 }
 break;
case ".lib_comp":
     if (sDataName[1] == 1) {
     document.getElementsByName(".lib_comp").checked = true;
     document.getElementsByName(".lib_comp").value= 1;
   } 
   else {
    document.getElementsByName(".lib_comp").checked = false; 
   document.getElementsByName(".lib_comp").value= 0;
 }			 
 break;	
default:
      alert("not caught = " + sDataName[0]);
       continue;
		
	}
}
}
/* ]]> */
</script>

<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />

The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes.

Thanks for looking at this, and giving any suggestions you might have!

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

Hi All,

I have created my second Form to File Web Form thanks to some help from other members. Looks great.

I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same).

For some reason, I can't get my Java Script validation to take effect.

I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn.

Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point:

Added Fields: Department, SteetAddress, CityState
Deleted: State/Research Accounts, Vendor Checkbox
Modified: "Type" which is a radio button that I have changed the choices of.

I beleive that's it...I will post my Java Script here and attach my Index File.

Thank you in advance!!

Code:

/********************************************************************************
 *
 * FORM VALIDATION 
 *
 ********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
    if ( grp.length == null ) return grp.checked ? grp.value : null;
    for ( var g = 0; g < grp.length; ++g )
    {
        if ( grp[g].checked ) return grp[g].value;
    }
    return null;
}
// trim a string
function trim(fld)
{
    var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
    fld.value = val;
    return val;
}
 
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
    var email = trim( fld );
    fld.value = email;
    return echk.test(email);
}
 
var digonly = /[^\d]/g
function formatPhone( fld )
{
    var ph = fld.value.replace( digonly, "" );
    if ( ph.length != 10 ) return;
    fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
 
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
    return phchk.test(fld.value);
}
 
function validateForm( frm )
{
	var oops = "";
    
    if ( trim( frm.elements["Username."] ).length  < 5 )
        oops += "You must enter your first and last name\n";
    if ( ! emailCheck( frm.elements["Email."] ) )
        oops += "That does not appear to be a valid email address\n";
	if ( trim( frm.elements["Department."] ).length  < 3)
        oops += "You must enter your department name\n";
    if ( ! phoneCheck( frm.elements["Phone."] ) )
        oops += "That is not a valid 10-digit phone number\n";
    if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 5 )
        oops += "You must enter your building and room information\n";
	if ( trim( frm.elements["StreetAddress."] ).length  < 5 )
        oops += "You must enter your street address information\n";
	if ( trim( frm.elements["CityZip."] ).length  < 5 )
        oops += "You must enter your city and zip code information\n";
		apptype = getRBValue( frm.elements["Type."] );
    if ( apptype == null )
        oops += "You must check one class\n";
   
    var app = getRBValue( frm.RequireApprovalYesNo );
    if ( app == null )
        oops += "You must specify whether or not approval is required.\n";
    if ( app == "Yes" )
    {
        if ( trim( frm.Approver ).length < 5 )
            oops += "You must enter the name of the approver\n";
        if ( ! emailCheck( frm.ApprovalEmail ) )
            oops += "The approval email is not a valid email address\n";
    }
   
 }
 
function showapp(yesno)
{
    document.getElementById("APP1").style.display = 
    document.getElementById("APP2").style.display = 
    document.getElementById("APP3").style.display = 
		yesno ? "" : "none";
}
 
</SCRIPT>

I've been using a script for verifying forms across several pages, and I've run into a page where it won't work the way it is.

It's a form that loops through and creates a set of fields over and over, depending on the number of attendees. I'm assuming this disrupts the form verification because the fields get generated with the same id. I think I need to find another way to make sure the user enters valid and complete information. Here's what I've been using:

Code:

function myForm(){
	// Make quick references to our fields
	var fname = document.getElementById('fname');
	var lname = document.getElementById('lname');
	var birth_month = document.getElementById('birth_month');
	var birthday = document.getElementById('birthday');
	var birthyear = document.getElementById('birthyear');

	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(fname, "Please enter only letters for your first name")){
		if(isAlphabet(lname, "Please enter only letters for your last name")){
			if(madeSelection(birth_month, "Pleace choose a birth month")){
				if(madeSelection(birthday, "Please choose a birth day")){
					if(madeSelection(birthyear, "Please choose a birth year")){
						return true;
						}
					}
				}
			}
		}

	
	return false;
}



function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z ]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}


function madeSelection(elem, helperMsg){
	if(elem.value == ''){
		alert(helperMsg);
		elem.focus();
		return false;
	}else{
		return true;
	}
}

</script>

<!-- the snippet that creates the form fields is he  -->

	$count = $line;
	 $i = 1;
while ($i <= $count) {
     $i++;  /* the printed value would be
                   $i before the increment
                   (post-increment) */
				   $x = $i-1;
				
				   
	?>
<form name="register1" class="registration_form" method="post" action="register2.php" target="_self" onsubmit="return myForm()">
	
    
    First Name<br><input type="text" name="kfname[]" id="fname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" /><br>

Kid's Last Name<br><input type="text" name="klname[]" id="lname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';"  /><br>
    
   Birthdate<br>
    <select style="width:75px;" id="birth_month" name="bdate2[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">month</option>
  <option value="01">Jan</option>
  <option value="02">Feb</option>
<!-- etcetera -->
</select>
    
    
        <select style="width:57px;" id="birthday" name="bdate[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">day</option>
  <option value="01">01</option>
  <option value="02">02</option>
<!-- etcetera -->
</select>
	
<select style="width:60px;" id="birthyear" name="bdate3[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">year</option>
  <option value="1993">1993</option>
  <option value="1994">1994</option>
<!-- etcetera -->
  
</select>

</form>

Hi,
I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql.

Here is a summary of the code:

Code:

<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block'; 
}
else{
document.getElementById("textbox").style.display='none'; 
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block'; 
}
else{
document.getElementById("textbox1").style.display='none'; 
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>

<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation

<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>

Any help is appreciated,
Thanks in advance!

Hi,

I have a form where I want to check that at least one email address has been entered on one line.

The html form is below and users are given the option to add additional lines to the form using the addRowToTable function also below.

How do I do this? I've tried several ways but because lines are added to the form, it doesn't work if you check over all 10 lines, when you're only showing 5.

Form:
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" onsubmit="check_form();"name="form">
<input type="hidden" name="migrate" value="1" />
<table id="migration_emails" >
<tr><td><input type="text" name="email_account_1" id="email_account_1" size="40"><input type="button" onclick="addRowToTable();" name="add" value="Add text box" /></td></tr>
<tr><td><input type="text" name="email_account_2" id="email_account_2" size="40"></td></tr>
<tr><td><input type="text" name="email_account_3" id="email_account_3" size="40"></td></tr>
<tr><td><input type="text" name="email_account_4" id="email_account_4" size="40"></td></tr>
<tr><td><input type="text" name="email_account_5" id="email_account_5" size="40"></td></tr>

</table>
<p><input type="submit" value="Migrate" /></p>

</form>


Add row to table function:

function addRowToTable()
{
var tbl = document.getElementById('migration_emails');
var lastRow = tbl.rows.length;
var iteration = lastRow + 1;
if(iteration <= 10) {
var row = tbl.insertRow(lastRow);

var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'email_account_' + iteration;
el.id = 'email_account_' + iteration;
el.size = 40;

cellLeft.appendChild(el);
} else {
document.form.add.disabled=true;
alert('Sorry, a maximum of 10 accounts can be added at one time.');
}

}

I am trying to create a form and validate it so that when the user enters their details, it doesn't let them confirm if the details are not filled out or incorrect. I am trying to use document.getElementById and labels, so instead of alerts appearing, a label appears next to the field that is required. I also am trying to validate the email to make sure the '@' and the '.' is in the right place.

Hey all,
I'm new to validating forms, so I'm trying to use jquery to do so. So far I have

Code:

<script type="text/javascript">
jQuery.noConflict();
var jQ = jQuery;

jQ(document).ready(
	jQ("#register").validate({
  		rules: {
    		    email1: {
      			required: true,
      			email: true
    		    },
		    email2: {
				required: true,
				email:true
		    }
  		},
		messages: {
			email1:{
				required: "Required",
				email: "Must be a valid email"
			},
			email2:{
				required: "Required",
				email: "Must be a valid email"
			}
		}
	})
);

</script>
</head>



<body>



<div id="createDiv" class="left loginBox" style="overflow:hidden;">

<form id="register" name="register" action="" method="post">

<legend>Register for a new Account</legend>

<fieldset style="border:0px; margin:0px; padding:0px;">

<div style="float:left; margin-right:15px;">
	<p>
	<label for="email1">Email Address:</label><br style="margin-top:0px;"/>
	<input type="text" id="email1" name="email1"  style="width:200px"/>
	</p>

	<p>
	<label for="pass1">Create Password:</label><br style="margin-top:0px;"/>
	<input type="password" id="pass1" name="pass1" class="required" style="width:200px"/>
	</p>
</div>


<div style="float:right;">
	<p>
	<label for="email2">Confirm Email Address:</label><br style="margin-top:0px;"/>
	<input type="text" id="email2" name="email2" style="width:200px"/>
	</p>

	<p>
	<label for="pass2">Confirm Password:</label><br style="margin-top:0px;"/>
	<input type="password" id="pass2" name="pass2" class="required" style="width:200px"/>
	</p>
</div>

<div style="clear:both;"></div><br/>

<input style="padding:5px 10px;" class="submit" type="submit" id="createSubmit" name="createSubmit" value="Create Account"/>

</fieldset>

</form>

I had it working when I only used validate and used classes to determine the rules. since this is really limited, I am trying to get away from that, but I can't figure out what I'm doing wrong. any help would be appreciated.

Hi i got a script that validates the fields username and password, can anybody check if this code for checking the username and password
for illegal characters is ok or if i need to change it.
thanks kimbo
Code:

addLoadEvent (function() {
	document.entryform.onsubmit = validateEntry;
});


function validateEntry() {
	
	var errorMsg = "";
	

	if (document.getElementById("username").value <= "") {
		errorMsg += "Please enter your username.\n";
	}
	

	if (document.getElementById("password").value == "") {
		errorMsg += "Please enter your email password\n";
	} else {
		
		if (!document.getElementById("username").value.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/)) {
			errorMsg += "invalid characters.\n";
		}
		
		if (!document.getElementById("password").value.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/)) {
			errorMsg += "invalid characters.\n";
		}
		
	}
	
		if (errorMsg == "") {
		return true;
	} else {
		alert(errorMsg);
		return false;
	}
}



function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
		if (oldonload) {
			oldonload();
		}
		func();
		}
	}
}

Good Day,

I am new to this forum so i hope i am posting in the correct place.

I have been working on a form validation in javascript where the error messages should be displayed beside the form field (no alerts!). The error message is displayed when i iuse alerts but not otherwise.

I have included a code snippet below. Any help will be greatly appreciated. Thanks in advance.

function validation()
{
//alert('made it here');

var fName = document.getElementById('txtFname').value;
var fNameId = document.getElementById('txtFname');


if(validateName(fName,fNameId)){

return true;
}

return false;
}


function validateName(name,id){
var ck_name = /^[A-Za-z0-9 ]{6,20}$/;
//alert('made it it here');

if(!ck_name.test(name))
{
//alert("Invalid");
var message = "Should be between 3 and 20 characters and made up of etters, numbers or - symbol";

//create a new span element
var sp = document.createElement('span');
//assign the new span element a class
sp.className = 'error';
//assign span some content
sp.appendChild(document.createTextNode(message));
//place the message after the form field
document.body.insertBefore(sp, id);

name.value="";
name.focus();

return false;
}
return true;
}

Hi everyone, this is my first thread on the forum. .
I am having issues with a form I am trying to validate.
It validates on a remote server (WAMP) I have set up on my laptop but when I attempt it on another server it will not work.

The code is as follows:

<script type="text/javascript">

function validateForm()
{
var x=document.forms["pass"]["npass"].value
var y=document.forms["pass"]["password"].value
if (x==null || x=="")
{
alert("Please enter your new password");
return false;
}
if (y==null || y=="")
{
alert ("Please confirm your new password");
return false;
}
else
alert("Some message");
}

</script>

<form name="pass" action="#" method="post" onsubmit="validateForm()">
<input name="npass" type="password">
<input name="password" type="password">
<input type="submit" value="Submit">


My browser is also configured to accept javascript. Any help would be very much appreciated.

Thanks in advance,
tdsrogers