javascript: text validation

[Sridhar_Rao]

I have a form with 25 text boxes, named t1, t2, t3...t25. I expect the user to enter a single alphabet in capitals. When the user submits the button, I expect to check all the 25 elements for the following:
is it empty?
is it in capitals?
is the length of text restricted to 1?
is the input in numericals or symbols?

If found unacceptable, an alert displaying the error be made and focus sent to that field.

I can code to check each element one by one but that would result in repetition of same code 25 times, is there a way to do it in few lines?

 

[victor_rambo]

Put all textb oes into an array and loop through each value of that array!

And do post few lines of your JS code that are supposed to do the actual validation. We might suggest something better!

And I hope you are validating them on the server side too, because its easy to manipulate things on client-side. Your JS validation could fail!

 

[Faun]

You may need to take a look at SPRY for unobtrusive and efficient validation.

 

[chandru.in]

Using a reg-ex check should fit your need. Look into the code below. I have used ID instead of name.

function validateInput() {
	for (i = 1; i<= 5; i++) {
		var field = document.getElementById('t' + i);
		if(!/^[A-Z]$/.test(field.value)) {
			alert('Invalid Input!');
			field.focus();
			field.select();
			break;
		}
	}	
}

 

[kapsicum]

simply make a js function which contains all the validation u need i.e.
is it empty?
is it in capitals?
is the length of text restricted to 1?
is the input in numericals or symbols?

and while form submition call the function (in a loop) passing it two parameters viz. the fieldName (Not Field Value) & Alert box message(if u need to specify the name of unacceptable field)

*fieldName parameter is passed so the function can check its value using fieldName.value & also Focus on the field in question using fieldName.focus

ohh i just saw chandru.in's code.... its neat too

 

[Sridhar_Rao]

Thanks to the community, I got the solution. It is chandru's code that I was looking for. You may see its implementation at *www.microrao.com/crossword1.htm

The funny thing about this javascript code is that, it works only in IE browsers and not in Firefox or Chrome. I tested it on all three and found to be working only in IE7.

 

[chandru.in]

The problem is that you have given only the "name" attribute for the text fields. For document.getElementById() to work, you must specify the "id" attribute. If you absolutely want to use only the name attribute, you can use document.getElementsByName().

The difference between "name" and "id" attributes is that value of "id" attribute should be unique in the page while "name" values can be repeated. In your case since you are anyway giving unique "name"s for all the text fields and using it for verification of solution, I'd suggest using "id" instead of "name". You could have used name if you could give same name for all text fields but in this case anyway it won't help you.

IE is notorious for killing web standards and acting in weird ways. In this case for some odd ball reason it returns the first component with given name when using getElementById(). Guess IE developers has gotta learn the difference between "name" and "id" and realize that there can be multiple elements with same name and returning only the first element with that name is brain-dead at best.

 

[Sridhar_Rao]

Thanks Chandru! So silly of me to have missed the point. I added ID to all the elements and now it is working perfectly. Even when I changed it to getElementByName, it still did not work, is this property supported only by IE?

 

[victor_rambo]

It should be getElementsByName().
It shall return an array containing all the elements with the given name.