Validate all textboxes to be numeric

I have a varying number of text boxes on a page... i want to validate that they all contain only 0-9 (numeric) and if so allow the form to submit

thanks!

try:

<form name='form1' method='post' action='file.php' onsubmit="return validate(document.form1);">
<input type='text' name='field1' />
<input type="submit" name="submit" value="submit" />
</form>

<script type="text/javascript">

function validate(formObj)
{
regex = /^\d+\.*\d*$/;
if (!regex.test(formObj.field1.value))
{
alert('textbox does not contain a number');
return false;
}
else
{
return true;
}
}

</script>

well while that looks like it might validate one textbox im sure theres a way to validate the DOM array that holds all of the textboxes... i just dont know how to do that and cant hardcode this since there are varying number of textboxes

give that a shot then...note: I'm not validating for anything other than numeric values in the textboxes....this also requires that the "submit" input be the very last input node in your form:


<form name='form1' method='post' action='file.php' onsubmit="return validate(document.form1);">
<input type='text' name='field1' /><br />
<input type='text' name='field2' /><br />
<input type='text' name='field3' /><br />
<input type='text' name='field4' /><br />
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
function validate(formObj)
{
var inputArr = formObj.getElementsByTagName('input');
var regex = /^[0-9]+$/;
for (i=0; i<inputArr.length - 1; i++)
{
if (!regex.test(inputArr[i].value))
{
alert('textbox does not contain a number');
inputArr[i].select();
return false;
}
}
return true;
}
</script>

that pretty snappy!

would it be possible to change the background-color: property of the offending text box after calling select with something like this:


inputArr[i].style.backgroundcolor='red';


which doesnt work ;)

C of backgroundColor must be uppercase:

inputArr[i].style.backgroundColor='red';

<form name='form1' method='post' action='file.php' onsubmit="return validate(document.form1);">
<input type='text' name='field1' /><br />
<input type='text' name='field2' /><br />
<input type='text' name='field3' /><br />
<input type='text' name='field4' /><br />
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
function validate(formObj)
{
var inputArr = formObj.getElementsByTagName('input');
var regex = /^[0-9]+$/;
for (i=0; i<inputArr.length - 1; i++)
{
if (inputArr[i].style.backgroundColor=='red')
inputArr[i].style.backgroundColor='';
}
for (i=0; i<inputArr.length - 1; i++)
{
if (!regex.test(inputArr[i].value))
{
alert('textbox does not contain a number');
inputArr[i].select();
inputArr[i].style.backgroundColor='red';
return false;
}
}
return true;
}
</script>

hrm... in firefox at least that doesnt work

Works great for me in IE and Firefox...

But the selection color in firefox certainly doesn;t complement a background color of red...

But you get what you ask for :)

hrm.. it does seem to work now.... thinking i forgot to save in jedit ;)

much obliged!

fortunately i do not have a red BG color for the page ;)