Stopbyte

How to validate a group of input text boxes using javascript at submit?

Web Development Javascript
#1

i have multiple <input /> text boxes in my HTML document’s form, when the user clicks the submit button i need to go through those Text boxes and validate them all, that they have only numeric values, if anyone fails the validation, the submit will be aborted, i don’t want to use named input boxes instead i prefer using more dynamic solution and access the input boxes without naming them.

this is my html code:

<html>
    <head>
        <title>My Project 1.0.1</title>
        <script type='javascript'>
        
            function validateBoxes(inputbox)
            {
                var regex =  /^[-+]?[0-9]+$/;
                if (inputbox.value.match(regex))
                    return true;
                else {
                    alert("Invalid value ["+inputbox.value+"], input numeric value only.");
                    inputbox.focus();
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form method="post" action="/validation_success.php">
            ID 1: <input type='text' id='input_numeric'/>
            ID 2: <input type='text' id='input_numeric'/>
            ID 3: <input type='text' id='input_numeric'/>
            ID 4: <input type='text' id='input_numeric'/>
            
            <input type='submit' onclick="validateBoxes(document.getElementById('input_numeric'))"
                   value='Submit'/>
        </form>
    </body>
</html>
1 Like
#2

Here is a simple Solution:

function validateBoxes()
{
	var el;
	var regexp =  /^[-+]?[0-9]+$/;
    var els = document.forms[0].elements;
    
	for (var i = 0; i < els.length; i++)
	{
		el = els[i];
		
		// If the current element is a Text input then process it otherwise ignore it.
		// you can add other specific conditions such as el.value.startsWith("input_numeric"); to make
		// sure only your text input's gets targetted.
		if (el.type == 'text')
		{
			if(!el.value.match(regexp))
			{
				alert("Error: Only numeric values accepted.");
				el.focus();
				return false;
			}
		}
	}
 
    // All Boxes were successfully, validated.
    return true;
}

One last Note when you call that ValidateBoxes() method from HTML don’t pass any arguments, as it takes none.

1 Like
#3 
function ValidateNumericValues()
{
	var regexp =  /^[-+]?[0-9]+$/;

	for (var i = 0; i < document.forms[0].elements.length; i++)
	{
		var x = document.forms[0].elements[i];
		
		if (x.class == 'class-of-inputs-to-be-validated')
		{
			if(!x.value.match(regexp))
			{
				alert("Invalid input (numeric value).");
				x.focus(); // good useful, trick to point users to the invalid box.
				return false;
			}
		}
	}
    return true;
}

looks like you are already doing it the correct way, you only need an iterator to go through your input boxes. I’ve used a class to identify the input boxes willing to validate, while you can use different properties to distinguish input’s to validate from the ones to not.