Javascript validation not working on every field
The code below is a section of a webpage that validates IP Addresses. The code is only checking the first text box on each record. Any ideas why it is not checking all text boxes?
Thanks,
David
<html>
<head>
<script type="text/javascript">
<!--
var octet = '(?:25[0-5]|2[0-4][0-9]|1[
var ip = '(?:' + octet + '\\.){3}' + octet;
var ipRE = new RegExp( '^' + ip + '$' );
function check_ip_format( ip_field, ip_value ) {
alert("ip_field=>>" + ip_field.name + "<<");
alert("ip_value=>>" + ip_value + "<<");
if (!isBlank(ip_value)){
alert( ( ipRE.test( ip_value ) ? '' : 'in' ) + 'valid' );
if ( !ipRE.test( ip_value ) )
ip_field.focus();
}
}
function isBlank(val)
{
if (val == null) { return true; }
for (var i = 0; i < val.length; i++) {
if ((val.charAt(i) != ' ') && (val.charAt(i) != "\t") && (val.charAt(i) != "\n") && (val.charAt(i) != "\r")) { return false; }
}
return true;
}
//-->
</script>
<title>Users</title>
<link href="includes/css/main.cs
</head>
<body onload="IPMin_1.focus();">
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
<form action="" name="form" method="post">
<tr><td> </td></tr>
<tr>
<td>
<table border="0" cellspacing="3" cellpadding="0" width="855">
<tr>
<td colspan="5"><hr /></td>
</tr>
<tr><td colspan="2"> </td></t
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="listheader" width="5%"><b>Record</b></
<td class="listheader" width="2%"> </td>
<td class="listheader" width="20%"><b>IP Address Minimum</b></td>
<td class="listheader" width="2%"> </td>
<td class="listheader" width="20%"><b>IP Address Maximum</b></td>
<td class="listheader" width="2%"> </td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<tr>
<td class="formlabel" width="5%">1</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMin_1" type="text" size="20" maxlength="25" value="98.191.209.200" onblur="javascript: return check_ip_format(IPMin_1, IPMin_1.value);" />
</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMax_1" type="text" size="20" maxlength="25" value="98.191.209.250" onblur="javascript: return check_ip_format(IPMax_1, IPMax_1.value);" />
</td>
</tr>
<tr>
<td class="formlabel" width="5%">2</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMin_2" type="text" size="20" maxlength="25" value="98.191.209.199" onblur="javascript: return check_ip_format(IPMin_2, IPMin_2.value);" />
</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMax_2" type="text" size="20" maxlength="25" value="98.191.209.255" onblur="javascript: return check_ip_format(IPMax_2, IPMax_2.value);" />
</td>
</tr>
<tr><td colspan="5"> </td></t
<tr><td colspan="5"> </td></t
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</body>
</html>
Thanks,
David
<html>
<head>
<script type="text/javascript">
<!--
var octet = '(?:25[0-5]|2[0-4][0-9]|1[
var ip = '(?:' + octet + '\\.){3}' + octet;
var ipRE = new RegExp( '^' + ip + '$' );
function check_ip_format( ip_field, ip_value ) {
alert("ip_field=>>" + ip_field.name + "<<");
alert("ip_value=>>" + ip_value + "<<");
if (!isBlank(ip_value)){
alert( ( ipRE.test( ip_value ) ? '' : 'in' ) + 'valid' );
if ( !ipRE.test( ip_value ) )
ip_field.focus();
}
}
function isBlank(val)
{
if (val == null) { return true; }
for (var i = 0; i < val.length; i++) {
if ((val.charAt(i) != ' ') && (val.charAt(i) != "\t") && (val.charAt(i) != "\n") && (val.charAt(i) != "\r")) { return false; }
}
return true;
}
//-->
</script>
<title>Users</title>
<link href="includes/css/main.cs
</head>
<body onload="IPMin_1.focus();">
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%">
<form action="" name="form" method="post">
<tr><td> </td></tr>
<tr>
<td>
<table border="0" cellspacing="3" cellpadding="0" width="855">
<tr>
<td colspan="5"><hr /></td>
</tr>
<tr><td colspan="2"> </td></t
<tr>
<td colspan="2">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="listheader" width="5%"><b>Record</b></
<td class="listheader" width="2%"> </td>
<td class="listheader" width="20%"><b>IP Address Minimum</b></td>
<td class="listheader" width="2%"> </td>
<td class="listheader" width="20%"><b>IP Address Maximum</b></td>
<td class="listheader" width="2%"> </td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<tr>
<td class="formlabel" width="5%">1</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMin_1" type="text" size="20" maxlength="25" value="98.191.209.200" onblur="javascript: return check_ip_format(IPMin_1, IPMin_1.value);" />
</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMax_1" type="text" size="20" maxlength="25" value="98.191.209.250" onblur="javascript: return check_ip_format(IPMax_1, IPMax_1.value);" />
</td>
</tr>
<tr>
<td class="formlabel" width="5%">2</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMin_2" type="text" size="20" maxlength="25" value="98.191.209.199" onblur="javascript: return check_ip_format(IPMin_2, IPMin_2.value);" />
</td>
<td class="listheader" width="2%"> </td>
<td nowrap class="formdata" width="20%">
<input class="formdata" name="IPMax_2" type="text" size="20" maxlength="25" value="98.191.209.255" onblur="javascript: return check_ip_format(IPMax_2, IPMax_2.value);" />
</td>
</tr>
<tr><td colspan="5"> </td></t
<tr><td colspan="5"> </td></t
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</table>
</body>
</html>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try sobstituting the "alert" command with something else (you can even comment it).
Alert command behave strange in the script flow.
and try to remove the "return" part in ur onblur attributes: it's not needed IMO
Alert command behave strange in the script flow.
and try to remove the "return" part in ur onblur attributes: it's not needed IMO
It checks only one text box at a time because it is programmed to work only on the text box that looses the focus. Try the function at the end of this post. If you call it as:
<input onblur="check_ip_format(th
it will validate only THAT text box (which is equivalent to what you currently have).
If you call it as:
<input onblur="check_ip_format(th
It will validate all the <INPUT> elements within the enclosing <TD>. So if you had:
<TD>
<INPUT name="IP...">
<INPUT name="IP...">
</TD>
it will validate BOTH <INPUT>s (as long as the names begin with "IP").
Similarly, if you call it as:
<input onblur="check_ip_format(th
it will validate all the inputs on that row (which I guess is what you are after).
Finally,
calling it as:
<input onblur="check_ip_format(th
will validate all the <INPUT>s in the entire page (again, as long as the name of each field starts with "IP").
Regards,
Hielo
<input onblur="check_ip_format(th
it will validate only THAT text box (which is equivalent to what you currently have).
If you call it as:
<input onblur="check_ip_format(th
It will validate all the <INPUT> elements within the enclosing <TD>. So if you had:
<TD>
<INPUT name="IP...">
<INPUT name="IP...">
</TD>
it will validate BOTH <INPUT>s (as long as the names begin with "IP").
Similarly, if you call it as:
<input onblur="check_ip_format(th
it will validate all the inputs on that row (which I guess is what you are after).
Finally,
calling it as:
<input onblur="check_ip_format(th
will validate all the <INPUT>s in the entire page (again, as long as the name of each field starts with "IP").
function check_ip_format( field, container ) {
var nodes=null, limit, result='',i=-1;
container=container?container.toUpperCase():null;
if(container)
{
while( field.nodeName.toUpperCase()!=container )
{
field=field.parentNode;
}
nodes=field.getElementsByTagName('input');
}
else
{
nodes=[field];
}
limit=nodes.length;
while(++i<limit)
{
//validate only TEXT fields whose name start with "IP"
if(nodes[i].type && nodes[i].type.toUpperCase()=="TEXT" && nodes[i].name.substring(0,2)=='IP')
{
result+=("ip_field=>>" + nodes[i].name + "<<\n");
result+=("ip_value=>>" + nodes[i].value + "<<\n");
if (!isBlank(nodes[i].value)){
result+=( ( ipRE.test( nodes[i].value ) ? '' : 'in' ) + 'valid' )+"\n\n";
if ( !ipRE.test( nodes[i].value ) )
nodes[i].focus();
}
}
}
alert( result );
}
Regards,
Hielo
You were correct, the issue was the browser I was using and not the code. I use Google Chrome most of the time. It appears that JavaScript doesn't work or is limited in Google Chrome. Once I tested under IE and Firefox everything worked as expected. Some minor tweeks and validation is working 100%. I need to get myself better educated on Google Chrome and it's limitations. Thank you!!
Premium Content
You need an Expert Office subscription to comment.Start Free Trial