|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 5th, 2008, 10:46 AM
|
|||
|
|||
|
Vaildate text field
Hi all. I have the below function to validate a text field. On one page this charge account field is duplicated for several rows and is named "charge[]". How can I alter the below function to validate each row if each field is named the same.?
//VALIDATE CHARGE if(theForm.charge){ if(!theForm.charge.value.match( /(^\d{5}$)|(^\d{6}$)|(^\d{6}-\d{6}$)/) ){ alert("Please input a valid Charge Account!") theForm.charge.style.backgroundColor='pink'; theForm.charge.focus(); return false }}
|
|
#2
May 5th, 2008, 12:14 PM
|
||||
|
||||
|
You're not a noob, use CODE tags!
 You probably shouldn't be naming a bunch of text fields the same, it isn't really a valid way of doing HTML. Here's a stripped down example, to get you started: Code:
<form name="theForm">
<input type="text" value="" name="name" />
<input type="text" value="" name="address" />
<input type="text" value="" name="phone" />
<input type="text" value="" name="charge[0]" />
<input type="text" value="" name="charge[1]" />
<input type="text" value="" name="charge[2]" />
<input type="text" value="" name="charge[3]" />
<input type="button" value="test" onclick="validateCharges()" />
</form>
<script type="text/javascript">
function validateCharges() {
var inputs = document.theForm.getElementsByTagName('input');
var re = new RegExp('charge\\[\\d+\\]');
for (var i=0;i<inputs.length;i++) {
if (!re.exec(inputs[i].name)) continue;
if (!inputs[i].value.match(/(^\d{5}$)|(^\d{6}$)|(^\d{6}-\d{6}$)/)) {
inputs[i].style.backgroundColor='pink';
}
}
}
</script>
__________________
------------- vbrtrmn -------------- i think i'm missing some vowels here ------------------------------------ ---------- js.antinoc.net ---------- ------------------------------------ --- The Two Types of Programmers ---
|
|
#3
May 6th, 2008, 07:29 AM
|
|||
|
|||
|
Hi. Thanks for the help. I named all the fields "charge[]" so that I can populate that array and process on the server side. I'm not to good with javascripting and am confused how to validate each charge[] field. I did also give each field an id for another server side purpose. Each field also has an id as "id='charge$i'". $i being the row loop number beginning with "0". Maybe I can validate by the ID number. If anyone can help I would greatly appreciate it.
Tracy
|
|
#4
May 6th, 2008, 07:58 AM
|
||||
|
||||
|
What vbrtrmn posted does work. Apparently that code doesn't quite click with you though, so I'm offering this:
Code:
<form name="theForm">
<input type="text" value="" name="name" />
<input type="text" value="" name="address" />
<input type="text" value="" name="phone" />
<input type="text" value="" name="charge[]" />
<input type="text" value="" name="charge[]" />
<input type="text" value="" name="charge[]" />
<input type="text" value="" name="charge[]" />
<input type="button" value="test" onclick="validateCharges()" />
</form>
<script type="text/javascript">
function validateCharges() {
var inputs = document.getElementsByName('charge[]');
var invalid = false;
for (var i=0;i<inputs.length;i++) {
if (!inputs[i].value.match(/(^\d{5}$)|(^\d{6}$)|(^\d{6}-\d{6}$)/)) {
inputs[i].style.backgroundColor='pink';
invalid = true;
}
}
return !invalid; // for when this is in an onsubmit handler
}
</script>
Same deal here, but it won't work if any elements outside of the form being validated are named charge[]. I'm guessing that's not going to be an issue. Although XHTML elements can legally share the same name, I'm of vbrtrmn's mind on this one; it's pretty unusual to have multiple text fields share the same name. But if this is handled consistently by all browsers then great, do you what you want, and more power to you.
|
|
#6
May 6th, 2008, 10:38 AM
|
|||||
|
|||||
|
Nothing wrong with form fields having the same name, that is standard practice with radio buttons. It is a logical grouping of controls. The problem here is, that Javascript doesn't recognize the square bracket syntax that the server side language does. When you have multiple fields of the same name, they are simply put into a named node map. You access each node by using the item() method of the map.
Javascript Code:
__________________
"Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony! Well, but you can't expect to wield supreme executive power just 'cause some watery tart threw a sword at you! I mean, if I went 'round saying I was an emperor just because some moistened bint had lobbed a scimitar at me, they'd put me away!" Last edited by Hammer65 : May 6th, 2008 at 11:33 AM. Reason: Mistyped highlight tags
|
|
#7
May 6th, 2008, 12:31 PM
|
||||
|
||||
|
item() is unnecessary in JavaScript because you can access NodeLists with array syntax. If I remember correctly, IE has issues with item() too.
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#8
May 6th, 2008, 01:29 PM
|
||||
|
||||
|
Quote:
I have actually had the opposite experience with IE, but whatever works. I believe, that the "proper" documented way, is to use item().
|
|
#9
May 6th, 2008, 01:36 PM
|
||||
|
||||
|
They're the same. I prefer using the older, shorter syntax.
http://www.w3.org/TR/DOM-Level-3-Co...pt-binding.html Quote:
|
|
#10
May 6th, 2008, 01:43 PM
|
||||
|
||||
|
Ok. I stand corrected
Quote:
The DOM is supposed to be language independent, to this end there are a few cases like this where methods are exposed that are not necessary to use. This is one of those cases, one that I wasn't aware of until now. Last edited by Kravvitz : May 6th, 2008 at 01:55 PM. Reason: fixed the link
|
|
| Viewing: Dev Shed Forums > Web Design > JavaScript Development > Vaildate text field |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
))
Linear Mode
