form validation

[achiman]

I am using this code to validate a form to check that only numbers have been entered but when I enter alphabets the javascript raises an error but still submits the form. So please can anyone tell me where I am going wrong.

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}
</script>
<form>
Numbers Only: <input type='text' id='numbers' action= "desktop.html"/>
<input type='button' 
	onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"
	value='Check Field' />
</form>

[Airshow]

Achiman,

An onclick event in an input field can't be used to suppress form submission. The solution is simple but not obvious.

You need to initiate validation from the form tag's onsubmit event, and make sure you return the returned boolean value, like this:

<form action='myURL.php' method="get" onsubmit="return validate(this)">

Then write validate() to do all the necessary checks, including your isNumeric() on as many fields as need it. Return false for each failure case or true if everything validates.

(Note that a form's onsubmit event only fires in direct response to manual form submission (ie. clicking a "Submit" button). A javascript form.sumbit() , however initiated, will not fire the onsubmit event and submission is guaranteed).

Airshow

[achiman]

Thanks, so how do I validate for two different textbox in thesame form, one should accept only alphabets while the other should accept only numbers. when I use:

<form action='myURL.php' method="get" onsubmit="return validatealpha(this), return validatenum(this) ">

it checks both function for the two textbox which doesnt do the job. Thanks

[Airshow]

Achiman,

As I said, you need to write validate() to do all the necessary checks. What you have attempted is to call validate() multiple times from the onsubmit handler, which could be made to work (with the right syntax and logic) but would be incresingly cumbersome as the number of form elements grows.

It's ultimately a lot easier to have a very simple call from the onsubmit and to have all the complexity in a <script></script> block well away from the HTML. Hence my validate() suggestion.

There are many ways to formulate a validation function. Here's one, based on your original code:

function isAlpha(elem, helperMsg) {
	var pattern = /^[a-zA-Z ]+$/;
	if(elem.value.match(pattern)) { return true; }
	else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}
function isNumeric(elem, helperMsg) {
	if( Number(elem.value)+'' === elem.value ) { return true; }
	else {
		alert(helperMsg);
		elem.focus();
		return false;
	}
}
function validateForm(form) {
	var i;
	var alphaFields = ['myAlpha1', 'myAlpha2'];
	var numericFields = ['myNumeric1', 'myNumeric2'];
	for(i=0; i<alphaFields.length; i++) {
		if(form[alphaFields[i]] && !isAlpha(form[alphaFields[i]], 'Alphas Only Please')) { return false; }
	}
	for(i=0; i<numericFields.length; i++) {
		if(form[numericFields[i]] && !isNumeric(form[numericFields[i]], 'Numbers Only Please')) { return false; }
	}
	return true;
}

<form action='' method="get" onsubmit="return validateForm(this)">
	<input name="myAlpha1" value="abc" /></br /><!-- should pass -->
	<input name="myAlpha2" value="123" /></br /><!-- should fail -->
	<input name="myNumeric1" value="123" /></br /><!-- should pass -->
	<input name="myNumeric2" value="abc" /></br /><!-- should fail -->
	<input type="submit" value="Submit" />
</form>

As you will see, we loop inside validate() firstly to check all alpha fields, then to check all numeric fields.

Failure at any iteration, causes us to bomb out, returning false to inhibit form submission. If we get through every iteration of both loops, then no errors found - we return true and the form submits.

Airshow

[achiman]

Sorted, thanks very much.