Javascript function to check mutliple text box inputs

[mr_scooby]

hello, I have this form which has 4 fields that must not be empty on submit, I been trying to make an array that checks them.

<form action="login.php" method="post" onsubmit="return(checkAll(this))">
						<label>Username<br /><input id="input[]" type="text" name="username" /></label><br />

						<label>Email<br /><input id="input[]" type="text" name="email" /></label><br />

						<label>Password<br /><input id="input[]" type="password" name="pswd1" /></label><br />

						<label>Password Again<br /><input id="input[] "type="password" name="pswd2" /></label><br />

						<input type="submit" name="submit" value="Submit" />

						<input type="reset" value="Reset" />

						</form>

so far i have

function checkAll(this)
{
     document.getElementById("input[]")
     //for loop will go here
}

to be honest not sure were to start, at this stage I need to check whether there empty and the the username/password only has a-z0-9 and the email passes a regExp test.

I know how to write individual functions to check fields/regExp but have now idea how to loop it thru an array to do both.

any help much appreciated

[Thirusha]

I think it is better that you give all the fields unique id's.
If the fields are not going to change and not increase at any time, then you could just do a basic if else statement.
If the fields are going to increase then just loop through them, first you have to determine the length of the fields in the form.

var form1 = document.forms[formName]
//formName being the name of the form
for (i = 0; i < form1 .length; i++) {
inp= form1 .elements[i];
if (inp.value.length == 0){
alert("Please enter value in field" + inp.name);
}
}

this is by no means 100% correct code, it may need some tweaking, its just to give u a direction to go in.

[mr_scooby]

using the same id so that I can use

document.getElementsByID

incase I add more fields then I can just include them in the check, I don't want to do it by name as I use the unique name for the php validation

[mr_scooby]

this is weird, when I do it by name it works

unction checkAll(formObj)
{
	alert("formObj here");
	
	check_obj = document.getElementsByName("input[]");
	alert("formObj here1");

	for (i=0; i<check_obj.length; i++)
	{
		alert("inside formObj here");

	  if (check_obj[i].value == "")
	  {
	alert("Input item on Row #"+(i+1)+" has been left empty. Please make sure you input something into this field.");
		return false;
	  }
}

if I change it to by ID, it doesn't work

function checkAll(formObj)
{
	alert("formObj here");
	
	alert("formObj here");
	check_obj = document.getElementsById("input[]");
	alert("formObj here1");

	for (i=0; i<check_obj.length; i++)
	{
		alert("inside formObj here");

	  if (check_obj[i].value == "")
	  {

		alert("Input item on Row #"+(i+1)+" has been left empty. Please make sure you input something into this field.");
		return false;
	  }
}

why would it work on name buy not id? does ID not support arrays? I need to have unique names so that I can post it to php, hence the need to use Id's I believe

[Thirusha]

As far as I know there is no such thing as getElementsbyId there is only getElementById .

The id's have to be unique, see also w3schools

[mr_scooby]

As far as I know there is no such thing as getElementsbyId there is only getElementById .

The id's have to be unique, see also w3schools

given then that each id is unique, how would I go about creating an array to loop through each one to check for input, like I said doing it by name is easy but then I need the unique name to use for php $_POST

I tried

name = document.getElementByID('name');
	psw = document.getElementByID('psw');
	check_obj = new array(name,psw);

excuse the heaps of questions but anything outside of basic-intermediate php/html for web is still new to me.

[mr_scooby]

function checkAll(formObj)
{
	alert("formObj here");
	var obj = [];
	obj[0] = document.getElementById("name");
	obj[1] = document.getElementById("psw");

	alert("formObj here1");
	for (i=0; i<obj.length; i++)
	{
			alert("inside formObj here");
		  
		  if (obj[i].value == "")
		  {
			alert("inside formObj here111");
			
			alert("Input item on Row #"+(i+1)+" has been left empty. Please make sure you input something into this field.");
			return false;
		  }
	}
}

this seems to work, its not quite how I pictured it working, but once you pointed out that ID is unique it became much easier

cheers

[pritaeas]

Here is an example of how you could do it using jQuery:
http://www.pritaeas.net/public/jquery/enable-submit/

[Thirusha]

I don't think your code was going to work the way you want it to.
so i have tweaked your code to this:

<script>
function checkAll(formObj)
{
	var obj = document.forms[formObj];
	//obj[0] = document.getElementById("name");
	//obj[1] = document.getElementById("psw");

	//alert(obj.length);

	for (i=0; i<obj.length; i++)
	{

		  if (obj[i].value == "")
		  {
			//alert("inside formObj here111");

			alert("Input item on Row #"+(i+1)+" has been left empty. Please make sure you input something into this field.");
			obj[i].focus();
			return false;
		  }

	}
	document.forms[formObj].submit();
}
</script>
<form action="login.php" method="post" name="postingForm" id="postingForm" >
						<label>Username<br /><input id="input1" type="text" name="username" /></label><br />
						<label>Username<br /><input id="input1a" type="text" name="usernamea" /></label><br />

						<label>Email<br /><input id="input2" type="text" name="email" /></label><br />

						<label>Password<br /><input id="input3" type="password" name="pswd1" /></label><br />

						<label>Password Again<br /><input id="input4" type="password" name="pswd2" /></label><br />

						<input type="button" name="submitbtn" value="Submit" onclick="checkAll('postingForm')" />

						<input type="reset" value="Reset" />

						</form>

I have added an extra field just to see if it works if you add more fields.

I think it is safer to have a normal button instead of a submit button(type="submit"), and use an onclick event because a submit button will always submit the form, even if there are errors, and no one wants that, it is very dangerous.

try it out, and let me know what you dont understand, and i can explain why i did it that way.

[mr_scooby]

<script>

	1.var obj = document.forms[formObj];

</script>

<form action="login.php" method="post" name="postingForm" id="postingForm" >


<input type="button" name="submitbtn" value="Submit" onclick="checkAll('postingForm')" />

the only javascript bit i'm not too sure of is 1
1 = get all the ids or names of the form?

just curious as to why both the name and ID are required?, I 'm assuming the name could and ID could be anything so long as they are the same.

You the name the input type "button" and use onclick to call the function and it only goes to login.php if the line

document.forms[formObj].submit();

is reached

[Thirusha]

1 sets the variable obj to an array of the form that is supplied within the square brackets, if there is nothing in the brackets and it is written like document.forms[] you will then have access to all forms on the page. I think this gives a better explanation.

the name and ID of an element does not have to be the same, it must just be unique. naming(name and id) it the same thing is just easier for me. I found a nice link that explains all the form attributes.

it goes to login.php cause that what u specified in the form action attribute, i didnt change that.

I am not sure how php works, but once you submit the form, all fields should be available for you to access on the login.php page, it works that way for other server languages as well.

All that

document.forms[formObj].submit();

does is just submit the form, the same way have a submit button would submit the form.

[mr_scooby]

awesome thanks for your help, has given me a heaps better understanding of forms with javascript

cheers