Help with Text Field Array Validation

Dev Shed Forums Sponsor:

October 3rd, 2012, 05:15 AM

franzlin2010

Contributing User

Join Date: Oct 2009

Location: Ghana

Posts: 42

Time spent in forums: 18 h 35 m 29 sec
Reputation Power: 4

Help with Text Field Array Validation

Please i have this form with contains multiple text fields with their names as array, pls here is the code.

I want to use javascript to validate the multiple tex fields before they are submitted.

Code:

<form action="index.php" method="POST" id="form" name="form" onsubmit="return check_fields();">

<table width="60%" id="expenses_table" class="again">
<tr>
<td width="60%">Receiver's Name:</td>
<td><input type="text" name="r_name[]" value="" class="receiver_input"></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="r_desc[]" value="" class="receiver_input"></td>
</tr>                
<tr>
<td>Amount:</td>
<td><input type="text" name="r_amount[]" value="" class="sales_input"></td>
</tr>             
</table><hr class="hrule">

And here is the javacript code but its not working at all pls help me out.

Code:

<script type="text/javascript">
exp_form = document.getElementById("form");
function check_fields(exp_form)
{
	for(i=0;i<=exp_form.elements.length;i++)
	{
		if(exp_form.elements[i].value=="")
		{
			alert('empty fields detected');
			return false;
		}
	}
}
</script>

Thanks a lot in Advance.

October 3rd, 2012, 11:36 AM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

Hello franzlin,

you seem to have to mistakes in your code.

The first is, that you are trying to pass the variable exp_form to the check_fields() function by giving declaring it as it's parameter, but you don't pass that parameter when calling the function.
Instead move the exp_form variable inside the check_fields() function:

Code:

function check_fields() {
var exp_form = document.getElementById("form");
for(i=0;i<=exp_form.elements.length;i++) 	{ 		
[…]

I also added a var to no clutter the global scope, just a best practice.

Second, you have to make the function accessible when the form renders and not after, e. g. when using a DOM-Ready event callback.

You might want to move away from using inline JS event handlers and rather bind them from within the JS.

I hope I could help you.

October 4th, 2012, 08:03 AM

franzlin2010

Contributing User

Join Date: Oct 2009

Location: Ghana

Posts: 42

Time spent in forums: 18 h 35 m 29 sec
Reputation Power: 4

thanks a lot for your reply

I have modified as u said, but there is still something wrong with the function i don't know.

When I un-comment the alert line and take out the logical statement at the end of the line. the function works correctly but in turns gives a lot of alert boxes.

I have set a flag in the loop to be raised if empty fields were detected in the forms.

Which i used the if statement to check if the flag was raised outside the loop.

which is still not working pls help me check it out.

thanks a lot

Code:

function check_fields()
{
	var exp_form = document.getElementById("form");
	var error2 = 0;
	for(i=0;i<=exp_form.elements.length;i++)
	{
		if(exp_form.elements[i].value=="")
		{
//			alert('empty fields'+i);
			var e_error_field = 1;	
		}
	}

	if(e_error_field == 1)
	{
		alert('empty fields detected');
		return false
	}
	else
	{
		return true;
	}
}

October 4th, 2012, 10:29 AM

YellowBricks

Registered User

Join Date: Oct 2012

Location: Hannover, Germany

Posts: 11

Time spent in forums: 2 h 54 m 33 sec
Reputation Power: 0

The code doesn't work, when you uncomment the alert line, it just delays the reload by waiting for you to click "okay". The problem is, that you are looping through the length of the fields but arrays in JS are zero indexed. Meaning, that when you have, e.g. 4, values in you array, the length is 4, but the maximum index is 3.

So the correct code should be:

Code:

function check_fields() {    
    var exp_form      = document.getElementById("form"),
          error2          = 0,
          e_error_field = 0;
     for(i=0;i<=exp_form.elements.length-1;i++) {
         […]
}

I also moved the e_error_field variable to the top to group all the variables with one var statement.

And by the way, I don't know, if you just didn't include it in your provided markup, but you're missing a </form>

I hope I could help you.

October 4th, 2012, 11:44 AM

franzlin2010

Contributing User

Join Date: Oct 2009

Location: Ghana

Posts: 42

Time spent in forums: 18 h 35 m 29 sec
Reputation Power: 4

Thank you very much Bro.
Your Solution Worked perfectly
I am still a newbie at Javascript.

I hope you can point me at the right direction to learn.

Help with Text Field Array Validation

Developer Shed Advertisers and Affiliates