JavaScript - At My Wits End - Form Validation Woes...

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,
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>

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>

hey there,

i dont have much experience with javascript and am doing a website that makes limited use of it.

i need to take a text form and set it so that when a number is entered and submitted that falls within a certain range, a corresponding graphic is displayed based upon the set range it falls within.

ie

user enters '2' and a photo of an apple displays to the right
user enters '3' and a photo of an orange displays to the right
user enters '4' and wisconsin explodes.

aforehand thanks.

I'm a PHP programmer, and am relatively new to Javascript. I'm validating a form, and need a bit of help. I need to validate content in an input field, whose content is generally similiar to this:

abc, defsadsdf, asdfsd, sadfsd

I need to be confirm that there are atleast 3 items in the field, that are separated by comments (as shown). Also, the items cannot be less than 3 chars. So if the field was:

a, asdfsd, asdfds, asdfsd

This would return an error.

Or if the field was:

asdf, adsfsdfd

This would also return an error. (because there are only two items)

In addition, the items themselves can have spaces within. Also, the items dont have to have spaces next to the commas. So for example, this would be a valid input and not return an error:

santa claus,frank,george bush,Joe

So basically it would be something along the lines of splitting it by the comma, trimming the data, then looping through.

I know how to write the code to get to where the text is validated, I just don't know how to validate the string to the specifications I've listed above.

I'd really appreciate some help. Thanks for your time.

HI all, I have a contact for that requires validating for a number of things. It validates Required for all parts of the form however fine.

My question is how can I ensure the client fills out the form fully. For instance, here in the UK we use 11 digits for phone numbers, but the form will validate if the clint enters just 1, so how can I ensure the customer actually enters all 11.

Here is the javascript I am using

function isFilled(str){ return (str != ""); }
function isEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); }
function isDigital(str) { return(parseFloat(str,10)==(str*1)); }
function isCurrency(val) { var re = /^(\$?\d+\$?|\$?\d+\.\d+\$?)$/; return (re.test(val)); }
function ValidForm(form) {
var field, i;
var req = new Array(10);
var email = new Array(1);
var digits = new Array(1);
var currs = new Array(0);
req[0] = "rw_First_Name";
req[1] = "rw_Last_Name";
req[2] = "re_Email";
req[3] = "rd_Mobile_Number";
req[4] = "r_Hair_Service";
req[5] = "r_Stylist";
req[6] = "r_Preferred_Day";
req[7] = "r_Preferred_Date";
req[8] = "r_Month";
req[9] = "r_Preferred_Time";
email[0] = "re_Email";
digits[0] = "rd_Mobile_Number";

for (i=0;i<10;i++) {
eval("field = form." + req[i]);
if (!isFilled(field.value)) {
alert("Field '" + field.title + "' is required to be filled in before successful submission.");
field.focus();
return false;
break;
}}
for (i=0;i<1;i++) {
eval("field = form." + email[i]);
if (!isEmail(field.value)) {
alert("Field '" + field.title + "' is required to be filled in with valid email addresses before successful submission.");
field.focus();
return false;
break;
}}
for (i=0;i<1;i++) {
eval("field = form." + digits[i]);
if (!isDigital(field.value)) {
alert("Field " + field.title + " is required to be filled in only with digits (0-9) and decimal point before successful submission.");
field.focus();
return false;
break;
}}
for (i=0;i<0;i++) {
eval("field = form." + currs[i]);
if (!isCurrency(field.value)) {
alert("Field " + field.title + " is required to be filled in only with digits (0-9) a decimal point, or a dollar sign before successful submission.");
field.focus();
return false;
break;
}}
return true; }

For my class activity(home work) I need validate a form which has several fields. I have created the form (html) and wrote some codes for validation. I want all my form fields display help text when they get focused and when the user enter invalid data display error text(not alert). All my help text are working. but error text are not. I wrote on focus and on blur events and functions for each field. But every time I preview it on IE I am getting "object expected error" I carefully checked all the element Id and those are okay. Please help me.


function myFocusHandler(e) {
var newClassName;
var eventTarget;
if (e.target) {
eventTarget = e.target;
} else if (e.srcElement) {
eventTarget = e.srcElement;
} else {
eventTarget = window.event.srcElement;
}

if (e.type == "focus" ) {
newClassName = "helpshow";
eventTarget.className = 'inputfocus';
} else if (e.type == "blur" ) {
newClassName = "helphide";

eventTarget.className = 'inputblur';
}

var relatedSpansId = eventTarget.id + "help";
document.getElementById(relatedSpansId).className = newClassName;
}

function errorshow(elementId) {

var relatedSpansId = elementId + "error";
document.getElementById(relatedSpansId).className = "errorshow";

function hideError(elementId) {
var relatedSpansId= elementId + "error";
document.getElementById(relatedSpansId).className = "errorhide";
}




function validateAllFields() {
var isemailOK = false;
var isformValid = true;
var email=document.getElementById("email");
IsemailOK=IsemailValid();
if (IsemailOK == false) {
formIsValid = false;
errorshow("email");
} else {
errorhide("email");
}

return formIsValid;
}

function isemailValid() {
var emailIsValid=false;
var emailElement;
var emailValue;
emailElement = document.getElementById("email");
emailValue = emailElement.value;
if (emaiValue== "/^[0-9A-Za-z\.\-_]+@([0-9A-Za-z\-_]+\.)+[A-Za-z]{2,}$/") {
emailIsValid=true;
}else{
emailIsValid=false;
}
return emailIsValid;


function validateemail(event) {
myFocusHnadler(event);
var isemailOK = false;
isemailOK=isemailValid();
if(emailOK == false) {
errorshow("email");
}else{
erroehide("email");
}
}

Hi,

I am doing a form validation where the form fields are dynamically created.. I need to show errormessages(Instead of alert messages) for the fields which fails validation... For time being I have created a dummy hardcoded form to test validation... The classnames could be named as "mandatory|date" mandatory|email etc... or it can be null or it can be only named as email,date,numbers etc....

So Here I need to either
1) alert the label values and show corresponding error messages(eg.. Name should not be empty, email should not be empty etc...
2) Display error messages next to the field which fails validation...

But also please keep it in mind that the div id for each fields would be same...

So is there any way to get this done even thru DOM scripting..?
For reference please find the attachment...
Please help...

Hello guys, I am working on my form page. Everything is working fine except one problem that I have...On my form, if I put nothing on the textboxes or choose no radio buttons, it suppose to say warning messages right next to it when I push the submit button. Also those warning messages supposed to be show up all at the same time. However, one of my warning messages for radio button don't show up. It only shows up when the other fieldset radio button is selected. And here is my code for html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
	<meta name="author" content="" />
	<meta name="description" content="forms" />
	<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<link rel="stylesheet" href="javascript.css"/>
	<script type="text/javascript" src="CSP.js"></script>
   <title>Forms::</title>
   </head>
   <body>
	<div id="container">
	   <!-- Begin web page -->
	   <div id="header"><!-- Header and Navigation -->
		<!-- Page Heading --><!-- Navigation -->  

	<script type="text/javascript">
	   displayHeader();
	</script> <br/><br/>
	   </div>

	   <div id="content">
	   <!-- Main Content -->
	   <h1>Photo Gallery: Ordering Form</h1><div id="orderForm">
	   <script type="text/javascript">
	   displayPhoto();
	   </script>
	   <div id="photoName"><p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspCity&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNight</p>     
	   </div>
	   
	<form id="frmCourse" method="get" action="ErrorMessage_FormProcessor.htm" 
        enctype="application/x-www-form-urlencoded"
        onsubmit= "return validate();">  // this is calling the function in my js file 
      	<fieldset>
	<legend>Customer Information</legend>
	<!-- Name Input --><div class=nameWrapper>
      	<p><label for="txtName" id="lblName">Name: </label>
        <input type="text" name="txtName" id="txtName" accesskey="N" tabindex="0" value="" />
        <label class="errorMessage" id="errMessageName">* Required Field</label></p>
      
      	<!-- Email -->
      	<p><label for="txtEmail" id="lblEmail">Email: </label>
        <input type="text" name="txtEmail" id="txtEmail" accesskey="E" tabindex="1" value="" />
        <label class="errorMessage" id="errMessageEmail">* Required Field</label></p></div>
	</fieldset><br/>

	<fieldset>
	<legend>Select Image</legend>
	<!-- Order Option -->
      	<p><label for="rdImageOne" id="rdImageOne">City</label>
        <input type="radio" name="rdImageOne" id="rdImageOne" accesskey="C" tabindex="2" value="" />
      
      	<label for="rdImageTwo" id="rdImageTwo">Night</label>
        <input type="radio" name="rdImageOne" id="rdImageTwo" accesskey="N" tabindex="3" value="" />
        <label class="errorMessage" id="errMessageImageTwo">* Select an Image</label></p>
	</fieldset><br/>	

	<fieldset>
	<legend>Order Information</legend>
	<!-- Size Option -->
      	<p><label for="rdoptionOne" id="rdoptionOne">4-Wallets ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionOne" accesskey="O" tabindex="4" value="" />
      
      	<label for="rdoptionTwo" id="rdoptionTwo">8X10 ($20)</label>
        <input type="radio" name="rdoption" id="rdoptionTwo" accesskey="T" tabindex="5" value="" />
        <label class="errorMessage" id="errMessageOptionTwo">* Select a size</label></p>

      	<p><label for="rdoptionThree" id="rdoptionThree">2-4X6 ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionThree" accesskey="H" tabindex="6" value="" />

      	<label for="rdoptionFour" id="rdoptionFour">11X14 ($30)</label>
        <input type="radio" name="rdoption" id="rdoptionFour" accesskey="F" tabindex="7" value="" /></p>

      	<p><label for="rdoptionOne" id="rdoptionOne">5X7 ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionFive" accesskey="I" tabindex="8" value="" /></p>
	
	<p><label for="txtQuantity" id="lblQuantity">Quantity: </label>
        <input type="text" name="txtQuantity" id="txtQuantity" accesskey="X" tabindex="9" value="" />
        <label class="errorMessage" id="errMessageQuantity">* Must Be 1-25</label></p>
         
      	<!-- Submit Buttons -->
      	<p><div class="submitWrapper"><input type="submit" name="btnSubmit" id="btnSubmit" value="Prepare Order" align = "center" accesskey="s" tabindex="10" /></p>
	</div>
	</fieldset><br/>
  	</form></div>

 
	   <div id="footer">
	   <!-- Footer -->
	   <!-- Begin Footer Div-->
	   <script type="text/javascript">displayFooter();</script>
           <!-- End Footer Div -->
	   </div>
	   <!--End web page -->
	</div>
   </body>
</html>

And here is a code for my js file. I feel like there is something wrong with which one it validates first. I tried to change the order, but I could not find the way to correct this.

Code:

function validate(){
	   
	var blnError = false;
	   //validate if email textbox is empty 
	if (document.forms[0].txtEmail.value <= 0){
	document.getElementById('errMessageEmail').style.display="inline";
	document.forms[0].txtEmail.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageEmail').style.display="none";
	}

	   //validate if name textbox is empty 
	if (document.forms[0].txtName.value == ""){
	document.getElementById('errMessageName').style.display="inline";
	document.forms[0].txtName.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageName').style.display="none";
	}
	
         //validate if email quantitybox is empty 
	if (document.forms[0].txtQuantity.value == ""
	||document.forms[0].txtQuantity.value <= 0
	||document.forms[0].txtQuantity.value > 25
	||isNaN(document.forms[0].txtQuantity.value)){
			
	document.getElementById('errMessageQuantity').style.display="inline";
	document.forms[0].txtQuantity.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageQuantity').style.display="none";
	}
          //validate if picture option radio button is choosen 
	var sizeSelection = false;
	for(var i=0; i<5; ++i){
	   if(document.forms[0].rdoption[i].checked ==true){
		sizeSelection = true;
	   }
	}
	if(sizeSelection==false){
		document.getElementById('errMessageOptionTwo').style.display="inline";
		return false;
	}
	else{
	document.getElementById('errMessageOptionTwo').style.display="none";
	   sizeSelection == true;
	}
      //validate if size option radio button is choosen 
	var pictureSelection = false;
	for(var i=0; i<2; ++i){
	   if(document.forms[0].rdImageOne[i].checked ==true){
		pictureSelection = true;
	   }
	}
	if(pictureSelection==false){
		document.getElementById('errMessageImageTwo').style.display="inline";
		return false;
	}
	else{
	document.getElementById('errMessageImageTwo').style.display="none";
	   pictureSelection == true;
	}

	
	if (blnError == true){
	return false;
	}  
	else {
	return true;
	} 
	}

can anyone help me on this please?

hi all

i have a form with the following validation rules:

Code:

<script type="text/javascript">
var errmsg;
function validate()
{
var textA= document.getElementById("text1");
var textC = document.getElementById("text3");
var txt1 = document.getElementById("text1").value;
var txt3 = document.getElementById("text3").value; 
var txt1_len = txt1.length;
var txt3_len = txt3.length;
	if(txt1_len == 0 || txt1_len > 50 || txt1_len < 10)
	{
		errmsg = "Error .";
		document.getElementById("ermsg").innerHTML = errmsg;
		textA.focus();
		return false;
	}
	
	else if(txt3_len == 0 || txt3_len > 30 || txt3_len < 10)
	{
		errmsg = "Invalid password!";
		document.getElementById("ermsg").innerHTML = errmsg;
		textC.focus();
		return false;
	}
	
	
	else
	{
		return true;
					
	}
	
return false;
}

</script>

these rules should alert the user if he enters less than 10 characters in the first field. I would like to know if i can alert the user as well if he doesn't enters some characters in that field.

For example if the user enters mynamehere i want him to enter my-name-here and also to restrict users to enter the email address in that field.

how can i achieve that using those rules?

thanks

Hi,
I am trying to make a form check two fields (using regular expressions) and then submit.

So far I have created my expressions but i cant get the form to validate correctly! I seem to get the error associated with the loyalty card rather than the postcode check.
Any help would be appreciated

My code is:

<script type="text/javascript">

function validate(postalCode) {
var re = new RegExp(/^([a-zA-Z]{2}[0-9]{1,2})|([0-9]{2}[a-zA-Z]{1,2})$/);
var str = postalCode.value;
if (re.test(str))
return true;
else
{
alert("That is not a valid postcode. Please verify your input.");
return false;
}
}
function validate(cardNumber)
{
var re = new RegExp(/^([a-zA-Z]{1}[a-zA-Z0-9]{4})([a-zA-Z0-9]{5})([a-zA-Z0-9]{3})([0-9]{1}[!&@?]{1})$/);
var str = cardNumber.value;
if (re.test(str))
return true;
else
{
alert("That is not a valid card number. Please verify your input.");
return false;
}
}
</script>

<html>
<form id="order" action= "" method="post" >
<table cellpadding="5">

<tr>
<td>Postal Code</td>

<td><input type="text" name="postalCode" maxlength=
"30" /></td>
</tr>
<tr>
<td>Loyalty card</td>
<td><input type="text" name="cardNumber" maxlength=
"30" /></td>
</tr>


<input id = "submit" type="submit" value="Submit" onclick="validate(postalCode); validate(cardNumber)" />

</td>
</form>

</html>

So, I've tried to get this working but i'm stumped. I'm trying to write some form validation... see below

Code:

	function validateForm()
		{
		var x=document.forms["useraccount"]["firstname"].value
			if (x==null || x=="")
 		 	{
  			document.getElementById("errorfirstname").innerHTML="enter first name";
  			return false;
  			}
  			else
  			{
  			document.getElementById("errorfirstname").innerHTML="";
  			}
  			
  		
  		var x=document.forms["useraccount"]["lastname"].value
			if (x==null || x=="")
 		 	{
  			document.getElementById("errorlastname").innerHTML="enter last name";
  			return false;
  			}
  			else
  			{
  			document.getElementById("errorlastname").innerHTML="";
  			}
  		}

and then in my html i have <div id="errorfirstname"></div> <div id="errorlastname"></div> etc.. and onsubmit="validateform()" in the form.

It sort of works.. it shows the errors if i submit the form with empty fields, but then if i enter data into them, the only the 'first name' field will make my error message disappear. for the 'last name', once the error message appears.. (ie, enter last name') it will not clear the message (as it should with document.getElementById("errorlastname").innerHTML=""



any help would be great.

thanks.

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.