Javascript form check for multiple row input

[rafiq009]

hi i wrote a script that check the input value. It works fine for this code.

javascript

<SCRIPT language="javascript" type="text/javascript">
		<!--
		function checknumber(x){
		        var anum=/(^\d+$)|(^\d+\.\d+$)/;
		                if (anum.test(x)) {
		                        return true;
		                } else{
		                        return false;
		                }
		}
		function check_form(form) {

		        s = form.input1;
		        t = form.input2;
		        u = form.input3;

		        if (s.value == '' || !checknumber(s.value)) {
				      	alert("Please input a valid Number!");
				        s.focus();
				        return false;
		        } else if (t.value == '' || !checknumber(t.value)) {
				      	alert("Please input a valid Number!");
				        t.focus();
				        return false;
		} else if (u.value == '' || !checknumber(u.value)) {
					alert("Please input a valid Number!");
					u.focus();
					return false;

	} else {
		 return true;
	}

	}
//-->
</SCRIPT>

form:

<form method="post" action="process.php"  onsubmit="return check_form(this)">
	<table border="0"  width="60%" align="center">

		<tr>
			<td><STRONG>Enter Values: </STRONG></td>
			<td><INPUT name=”input1” type=”text” ></td>
			<td><INPUT name=”input2” type=”text” ></td>
			<td><INPUT name=”input3” type=”text” ></td>

		</tr>
        		<tr>
			<td colspan="4" align="center">
			<input type="submit" value="Submit" name="Submit_button">
			</td>
		</tr>
        	</table>
	</form>

I would like to implement it for multiple row input. Now i am facing problem to do this. Please tell me how I could make it work for multiple row input.

<form method="post" action=""  onsubmit="return check_form(this)">
			<table border="0"  width="60%" align="center">

				<?php
				$num=$_GET['num'];
				for($i=0; $i<$num; $i++){
				echo "<tr>
					<td><STRONG>Enter Values: </STRONG></td>
					<td><INPUT name=input1[$i] type=text ></td>
					<td><INPUT name=input2[$i] type=text ></td>
					<td><INPUT name=input3[$i] type=text ></td>

				</tr>";
				}
				
				?>
        		<tr>
					<td colspan="4" align="center">
						<input type="submit" value="Submit" name="Submit_button">
					</td>
				</tr>
        	</table>
			</form>

One more thing, for example if i want the value of input1<=99 then how could i check it.
Thanks.

 

[essellar]

Well, the first step in friendly validation is to create a user-friendly form. As it stands, the user is being presented with a grid of fields (text inputs) with no instructions other than "Enter Values:", no indication of what those values mean (don't assume that the user will know what order the fields are in), no indication of what values are permitted, and no clue that all of the fields are compulsory -- and that's just the problems that a sighted user faces.

At a minimum, you'll need to add a header row to the table to act as a guide to tell the user what is expected in each column. The cells corresponding to the field columns should be TH elements. The first cell in each row should also be a TH element, and at a minimum should indicate the row number ("Item 1", "Item 2", etc., for instance). You should also have a text blurb on the page somewhere telling the user that all of the fields in the table must be filled in, and if any special values are required (for instance, your requirement that "input1" needs to be a valid number between 0 and 99).

Whenever possible, it's best to tell the user as much as you can about problems with the form all at once. Your current validation scheme pops an alert telling the user about the first mistake he/she made, but stops there. Imagine that the user didn't know that everything is required and leaves, say, 10 fields incomplete. It is conceivable that he or she could attempt to submit the form many times before catching on to your little game, get frustrated, and simply stop using your application. (That happens even in corporate environments -- users will find another way if corporate apps are a pain in the butt. If your users are customers, they will simply go somewhere else.) So rather than returning false at the first mistake, validate all of the fields, mark the bad ones clearly, prepare an error statement as you go, and show all of the errors at the same time.

You can cycle through all of the fields using the following:

var elems = form.elements;
var elemsLength = elems.length;
for (var i=0; i<elemsLength; ++i) {
  var field = elems[i];
   if (field.type && field.type == "text") {
      fieldName = field.name;
      fieldValue = field.value;
      // process field here
      }
   }

You can determine the numerical value of a field using parseInt() or parseFloat(). I know that doesn't completely answer your question (that is, I haven't written your validation code for you), but I tell you what -- you present me with a more user-friendly form, and I'll write a user-friendly JavaScript validation for that form for you. Frankly, I have just as much information here as your users would have, and that's not nearly enough to do the validation properly, let alone figure out how to fill in the form.

 

[rafiq009]

Thanks essellar. I am just testing these alerts. This is not for any kinds of user. I just running this in my localhost, thats why there is no any information. I am trying to learn how they work, then i will impliment them in real project.

 

[essellar]

Doesn't matter -- if you want to know how to do client-side validation properly, then it's best to simulate something a user might expect to see and have to use. The messages you give your users are real-world important. So even if this is just a programming/design exercise, try to make it something you can learn real-world techniques from. Again, if you present me with a usable form, I'll write a user-friendly validation for the form for you -- something that will give you a decent idea of how to both keep your data as clean as you can (not that you can forego server-side validation) and make your users happy (well, as happy as users ever get, anyway) at the same time. Believe me, when you get it right, it makes a huge difference to the user experience -- and far, far too many web sites get it very, very wrong.