Solved

Javascript validation not working on every field

Posted on 2012-12-28
5
1 solution
335 Views
Last Modified: 2013-01-08
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[0-9]{2}|[1-9][0-9]|[0-9])';
        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.css" rel="stylesheet">
</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>&nbsp;</td></tr>
      <tr>
            <td>
                                    <table border="0" cellspacing="3" cellpadding="0" width="855">
                                          <tr>
                                                <td colspan="5"><hr /></td>
                                          </tr>
                                          <tr><td colspan="2">&nbsp;</td></tr>

                                          <tr>
                                                <td colspan="2">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                            <tr>
                                                                <td class="listheader" width="5%"><b>Record</b></td>      
                                                                <td class="listheader" width="2%">&nbsp;</td>
                                                                <td class="listheader" width="20%"><b>IP Address Minimum</b></td>
                                                                <td class="listheader" width="2%">&nbsp;</td>                                          
                                                                <td class="listheader" width="20%"><b>IP Address Maximum</b></td>      
                                                                <td class="listheader" width="2%">&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="6"><hr /></td>
                                                            </tr>

                                                          <tr>
                                                                <td class="formlabel" width="5%">1</td>
                                                          <td class="listheader" width="2%">&nbsp;</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%">&nbsp;</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%">&nbsp;</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%">&nbsp;</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">&nbsp;</td></tr>
                                                            <tr><td colspan="5">&nbsp;</td></tr>
                                                      </table>
                                                </td>
                                          </tr>
                                    </table>
            </td>
      </tr>                        

      </form>
</table>

</body>
</html>
0
Comment
Question by:skinsfan99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 3
5 Comments
 
LVL 10

Expert Comment

by:ienaxxx
ID: 38726344
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
0
 
LVL 10

Accepted Solution

by:
ienaxxx earned 500 total points
ID: 38726350
It's working out-of-the-box in IE9 and in firefox 17.0.1 !!
0
 
LVL 82

Expert Comment

by:hielo
ID: 38731082
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(this);" ..>

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(this,'TD');" ..>
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(this,'TR');" ..>
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(this,'TABLE');" ..>
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 );
		}

Open in new window


Regards,
Hielo
0
 

Author Closing Comment

by:skinsfan99
ID: 38743748
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!!
0
 
LVL 10

Expert Comment

by:ienaxxx
ID: 38754287
Glad to be of help. :-)
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Get the Guide
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create N column layout for Bootstrap
Article by: Julian
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
How to Become a Web Developer
Article by: Ryan
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Navigation Hover Effects with CSS Sprites
Video by: Sarah
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Embedded Audio in HTML5
Video by: Sarah
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Advertise Here

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Advertise Here