Form with multiple fields validation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Alexancho
Forum Newbie
Posts: 6
Joined: Sat Jan 08, 2011 11:56 am

Form with multiple fields validation

Post by Alexancho »

I need to validate multiple fields of a form.
I tried to use a FOR loop for JS validation, but actually script validates only the last couple of fields.
If you press "submit" without filling in a form you will see all warning messages,
but if you filled in only a last "Contact name" and a "Phone" fields the for will be submitted
even if upper "Contact name" and a "Phone" are empty. What's wrong?

Code: Select all

<form method="post" action="read_create_phone_list.php" name="frm2">
						<fieldset>
							<legend>Phone List  Form</legend>
							

							

							<!-- contact fields -->
							<label title="contact"><span class="red">* </span>Contact name:</label>
							<input class="float" type="text" maxlength="100" id="fcontact1" name="fcontact1" onfocus="this.style.backgroundColor='white'"/>

							
							<!-- phone fields -->
							<label class="float" title="phone"><span class="red">* </span>Phone:</label>
							<input class="float" type="text" maxlength="10" id="phone1" name="phone1" value="Contact's phone, numbers only " onfocus="this.style.backgroundColor='white';document.frm2.phone1.value='';" /><br />
							
							<!-- contact fields -->
							<label title='contact'><span class='red'>* </span>Contact name:</label>
							<input class='float' type='text' maxlength='100' id='fcontact2' name='fcontact2' onfocus="this.style.backgroundColor='white'" />
							
							<!-- phone fields -->

							<label class='float' title='phone'><span class='red'>* </span>Phone:</label>
							<input class='float' type='text' maxlength='10' id='phone2' name='phone2' value="Contact's phone, numbers only " onfocus=" this.style.backgroundColor='white';document.frm2.phone2.value='';" /><br />
							
															<!-- <input class="btn" type="submit" value="Submit" " />	-->																	
							<input class="btn" type="button" value="Submit" onclick="check_form7(2);" />  
				
						</fieldset>
					  </form>

					<div  id="create_phone_error_box"></div>
					
					</div><!-- end multiform_box -->

Code: Select all

function check_form7(x){  
	var error=1;
	var error_text='';
	
	
	for (i = 1; i <= x; i++) 
	{
	
		var fcontact = "fcontact" + x;
		var fphone = "phone" + x;
		var contact = document.forms["frm2"][fcontact].value;
		var phone = document.forms["frm2"][fphone].value;
		
		
		
		/*start contact check*/
		
		if (contact == "") {
			error = 0;
			document.forms["frm2"][fcontact].style.backgroundColor = "#ffd7d7";
			error_text += 'The field "Contact name" is empty.<br/>';
		}
		
		var illegalChars = /[^a-zA-Zא-תа-яА-Я0-9_ ]/;
		if (illegalChars.test(contact)) {
			error = 0;
			document.forms["frm2"][fcontact].style.backgroundColor = "#ffd7d7";
			error_text += 'Only letters, numbers and underscore ("_") are allowed for the "Contact name" field<br />';
			
		}
		
		/* end contact check*/
		
		
		/*start phone check*/
		
		var phone = phone.replace(/[\+\(\)\.\-\ ]/g, ''); //we use regular expression and 
		//the replace() method to clear out any 
		//spacer characters: +().-space
		
		if (phone == "") {
			error = 0;
			document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
			error_text += "You didn't enter a phone number.<br/>";
		}
		
		else {
			if ((phone.length != 10)) {
				error = 0;
				document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
				error_text += "The phone number must be in 10 digits.<br/>";
			}
			
		}
		
		var filter = /[^0-9]/;
		if (filter.test(phone)) {
			error = 0;
			document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
			error_text += "The phone number contains illegal characters.<br/>";
		}
		
	/*end phone check*/
	
	
	}	/*end of FOR loop*/

	if (error==1)
	{
		document.frm2.submit();
	}
	else{
		document.getElementById('create_phone_error_box').innerHTML=error_text;
		}

}
xjx424
Forum Newbie
Posts: 3
Joined: Thu Jan 20, 2011 11:12 am

Re: Form with multiple fields validation

Post by xjx424 »

Your variable "x" in check_form7(x) is 2.
When you do your loop it will only loop 2 times.
Post Reply