Complex Form Validation

**Ntrimgs** · 12-16-2011 03:23 PM

I have a form input which needs to validate whether someone inputs a number that when divided by 10 will equal a whole number. In other words, the quantity can only be ordered in increments of 10. The validation needs to check immediately after they type in the number and go onto a new field.

Example:

HTML Code:

Enter Quantity 1: <input type="text" name="product['design1']['red']" />
Enter Quantity 2: <input type="text" name="product['design2']['red']" />
Enter Quantity 3: <input type="text" name="product['design3']['red']" />

If the alert could be displayed next to the appropriate form field that would be the best.

Anyone know how this can be achieved?

**webdev1958** · 12-16-2011 03:26 PM

You could put an onchange event handler on the input element which divides the number by 10. Then use modulus to check the remainder. If the remainder = 0 then the input number is an exact multiple of 10. Should be no more than a couple of lines of code.

**bionoid** · 12-16-2011 04:48 PM

As a side note, I believe that the members of the arrays you're submitting don't require quotes around them:

HTML Code:

Enter Quantity 1: <input type="text" name="product[design1][red]" />
Enter Quantity 2: <input type="text" name="product[design2][red]" />
Enter Quantity 3: <input type="text" name="product[design3][red]" />

**xelawho** · 12-16-2011 11:25 PM

being that your text box names are dynamically produced, you might have trouble lining them up with the div ids, but a simple version would go something like this (apologies for the shonky css):

Code:

<html>
<head>
<style>
.field{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="field">Enter Quantity 1: <input type="text" name="red" /></div><div class="field" id="reddiv"></div><div class="clear"></div>
<div class="field">Enter Quantity 2: <input type="text" name="blue" /></div><div class="field" id="bluediv"></div><div class="clear"></div>
<div class="field">Enter Quantity 3: <input type="text" name="green" /></div><div class="field" id="greendiv"></div>
<script type="text/javascript">

els=document.getElementsByTagName("input")
for (var i = 0; i < els.length; i++) {
if (els[i].type=="text"){
	els[i].onblur=function(){checkVal(this)}
	}
}

function checkVal(box){
if (box.value&#37;10!=0){
document.getElementById(box.name+"div").innerHTML="Not a multiple of 10"
	} else {
document.getElementById(box.name+"div").innerHTML=""
	}
}

			</script> 

</body>
</html>

**007Julien** · 12-17-2011 05:43 AM

Try this «Quantity Picker» which works too without mouse (with tabs and Enter). A relatively simple variant consists in specifying that commands are made by tens...

**xelawho** · 12-18-2011 01:46 PM

... or being that they have to be 10s you can just convert them to 10s as they go...

Code:

<html>
<head>

</head>
<body>
Enter Quantity 1: <input type="text" name="red" />
Enter Quantity 2: <input type="text" name="blue" />
Enter Quantity 3: <input type="text" name="green" />
<script type="text/javascript">

els=document.getElementsByTagName("input")
for (var i = 0; i < els.length; i++) {
if (els[i].type=="text"){
	els[i].onblur=function(){this.value=checkVal(this.value)}
	}
}

function checkVal(box){
val=box.replace(/[0-9]$/,0)
return(val);
}

			</script> 

</body>
</html>

**xelawho** · 12-18-2011 04:54 PM

... or if you wanted to round up or down to the nearest 10...

Code:

<html>
<head>

</head>
<body>
Enter Quantity 1: <input type="text" name="red" />
Enter Quantity 2: <input type="text" name="blue" />
Enter Quantity 3: <input type="text" name="green" />
<script type="text/javascript">

els=document.getElementsByTagName("input")
for (var i = 0; i < els.length; i++) {
if (els[i].type=="text"){
	els[i].onblur=function(){this.value=checkVal(this.value)}
	}
}

function checkVal(box){
return Math.round(box*0.1)/0.1;
}


			</script> 

</body>
</html>

or if you wanted to be sneaky and only round up...

Code:

<html>
<head>

</head>
<body>
Enter Quantity 1: <input type="text" name="red" />
Enter Quantity 2: <input type="text" name="blue" />
Enter Quantity 3: <input type="text" name="green" />
<script type="text/javascript">

els=document.getElementsByTagName("input")
for (var i = 0; i < els.length; i++) {
if (els[i].type=="text"){
	els[i].onblur=function(){this.value=checkVal(this.value)}
	}
}

function checkVal(box){
while (box&#37;10!=0) {
box++
}
return(box);
}


			</script> 

</body>
</html>

Thread: Complex Form Validation

Thread Tools

Display

Complex Form Validation

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions