Hi everyone, i have been pulling my hair on this for about 3 hours because my knowledge of javascript is limited to 'ctrl-c' as well as 'ctrl-v'.

I am trying to add an extra bit of validation for a particular field within a form.

The current validation makes sure that the field is not left blank and looks like this

	if(document.form_name.field_name.value=='')
	{
		alert("You must enter something.");
		document.form_name.field_name.focus();
		return false;
	}

Now i would like to add an extra bit of validation under this which makes sure that only alphanumeric characters (i.e. 0-9, a-z, nothing else not even spaces) are used:

I have tried the following modification of the above but it don't work.

	if(!isAlphanumeric(document.form_name.field_name)
	{
		alert("Soory. You may only enter letters and numbers.");
		document.form_name.field_name.focus();
		return false;
	}

I am sure this is a doddle for anyone with some experience with javascript and your few minutes of help will be greatly appreciated.

The following as a function should do it :

var myString = document.form_name.field_name.value;

if(myString.search(/^[0-9A-Z]+$/i)==-1)
{
alert("Sorry. You may only enter letters and numbers.");
document.form_name.field_name.focus();
return false;
}
return true;

This will not allow the visitor to submit an empty box either.

Thankyou electricsheep.

The really annoying thing is, for some reason, i wasn't informed about your reply, and so i kept on pulling my hair until i fell asleep. Anyhow, i have implemeneted it and it works fine.

Thanks again.

I would also appreciate it if you could explain the code bit-by-bit so that i can understand it and therefore reduce my need to seek external help. A bit like 'give a man a fish and you feed him once... teach a man how to fish and you feed him for life' or something like that.

var myString = document.form_name.field_name.value;
What exactly does 'document.' mean?


if(myString.search(/^[0-9A-Z]+$/i)==-1)
This is the part which i can't grasp, could you explan the above character by character.

The rest i understand

I look forward to your reply

Glad to hear it worked okay for you.

JavaScript references the elements of a page through what is called the 'document' object.
For example, to reference the second image in a page and assign it an image source file you could use (remember JavaScript counts from 0) :

document.images[1].src="myimage.gif";

'document' is the object, 'images' is an array that references the images on the page, 'src' is the equivalent of the <img> tag's 'src' attribute.
To get to the images you need to go through the document object using what is called 'dot' notation - objects are separated form their properties and methods by dots.

In this example :

document.form_name.field_name.value

'document' is the object, 'form_name' is the name of the form, 'field_name' is the name of the form element - perhaps a text box.
'document' and 'value' are pre-defined and must not be changed but you can name your form and form element just about anything you want to.

/^[0-9A-Z]+$/i is an example of a regular expression. Regular expressions ( regexes ) allow very powerful text manipulation and are found in most languages. In fact the previous example could be implemented in PHP, VBScript, Perl etc, as well as JavaScript, with each language having its own syntax for doing so.
Languages like JavaScript inherit their regexes from Perl. Often a language will be described as supporting PCRE ( Perl Compatible Regular Expressions )
Here is an explanation of the syntax I used :

/ starts and ends the expression
using ^ and $ forces an exact match
[0-9A-Z] means match any character that belongs to the character ranges inside the square brackets
+ means match one or more times
i makes it a case insensitive match

Even if someone is very familiar with programming languages regular expressions can look alien but they are well worth getting to grips with and they are easily ported between languages.
Sometimes isNaN(), indexOf() and charAt() etc, will get a job done without the need for regexes but in your scenario I think regexes are the best approach.

Enjoy catching fish!

HTH

Originally Posted by fambi

var myString = document.form_name.field_name.value;
What exactly does 'document.' mean?

It normally refers to an object on the page, in this case the form 'form_name'.

Originally Posted by fambi

if(myString.search(/^[0-9A-Z]+$/i)==-1)
This is the part which i can't grasp, could you explan the above character by character.

string.search is used to compare a string to a regular expression (a pattern of characters), returning true if it matches, false otherwise.

This particular regular expression would match any string containing one or more alphanumeric characters only.

More information of regular expressions can be found here.


EDIT: aaargh! beat me to it!

THanks guys. Your help has been most appreciated.