Minimum Length for a field(text) in a Form

I’ve Googled till my fingers are ready to fall off but unable to implement this into a text field in one of my forms.

It is a phone number field and needs a minimum character length of 10. I managed to implement the field as number only and made it required but I can’t figure out the minimum character length :confused:

Could anyone help me out with the javascript and the way I would format the text field so that it would make sure the minimum length is 10.

And is it possible to do this on a OnChange? Or something similar so that it instantly notifies the user that there is not 10 characters? (just so it does not intefere with my Form Validation on Submit which includes a popup box to show the fields that need to be populated.)

This is what the text field looks like now

<input type="text" MAXLENGTH ="10" size="10" name="number" value="" onChange="intOnly(this);" onKeyUp="intOnly(this);" onKeyPress="intOnly(this);">

intOnly makes sure to check that only numbers can go in this field

And is it possible to do this on a OnChange? Or something similar so that it instantly notifies the user that there is not 10 characters?

I don’t think that is a good idea. Constantly assualting the user when they are typing is annoying. I think you should validate that field along with the other fields onsubmit().

This page contains some samples of javascript form validation

http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

I have done something just recently that worked real well with US telephone numbers.
Breaking the phone number field out into 3 seperate text fields and adding an onkeyup event to each of the input type text boxes.
Little example below:

<script language="javascript" type="text/javascript">
		function AutoTabNext(iIndex, sForm, sName, iMaxLength) {
			var iCurrentLength = eval('document.'+sForm+'.'+sName+'.value.length');		
			if(iCurrentLength == iMaxLength && iIndex != 2) {
				var asFocus= new Array(3);
				asFocus[0]="txtArea";
				asFocus[1]="txt3Digit";
				asFocus[2]="txt4Digit";
				iIndex++
				oTextBox = eval('document.'+sForm+'.'+asFocus[iIndex]);
				oTextBox.focus();
			}
		}
	</script>
	<form name="frmMain">
		(<input type="text" name="txtArea" size="3" maxlength="3" onkeyup="javascript:AutoTabNext(0, this.form.name, 'txtArea', 3);" />)&nbsp;<input type="text" name="txt3Digit" size="3" maxlength="3" onkeyup="javascript:AutoTabNext(1, this.form.name, 'txt3Digit', 3);" /> - <input type="text" name="txt4Digit" size="4" maxlength="4" onkeyup="javascript:AutoTabNext(2, this.form.name, 'txt4Digit', 4);" />
	</form>