#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Ghana
    Posts
    42
    Rep Power
    6

    Smile 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.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep Power
    0

    Post


    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.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Ghana
    Posts
    42
    Rep Power
    6
    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;
    	}
    }
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Hannover, Germany
    Posts
    11
    Rep 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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Ghana
    Posts
    42
    Rep Power
    6
    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.

IMN logo majestic logo threadwatch logo seochat tools logo