Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Form Verification

    Hey Everybody,

    I'm trying to make a simple form verification routine in JavaScript and it's not working exactly like I want. I have a large form, named "entry" with many input boxes, and I want to check that the entries in the boxes are numbers and that they're reasonable numbers (in this case, any number between ~9 and ~15 is reasonable). I have my form set up like:
    Code:
    <form action="submit.php" name="entry" method="post" onsubmit="return validateEntry()">
    ...
    <input type="text" name="Left1.6">
    ... many more input boxes Left1.1 to Left5.10 ...
    Then I have my validation script like
    Code:
    <script>
    		function validateEntry(){
    		
    			for (shelf=1;shelf<6;shelf++)
    			{
    				for (bat=1;bat<11;bat++)
    				{
    					var batName='Front';
    					batName.concat(shelf.toString());
    					batName.concat('.');
    					batName.concat(bat.toString());
    
    					var x=parseFloat(document.forms["entry"][batName]);
    
    					if (x==null || x<9 || x>15)
    					{
    						var msg='It looks like you screwed up a value!\n';						
    						msg = msg + 'Check out ';
    						msg = msg + batName + '!!';
    						alert(msg);
    						return false;
    					}
    				}
    			}
    			
    			return true;
    		}
    </script>
    Unfortunately, this script seems very hit-or-miss. Sometimes it catches errors and other times it doesn't. What's more is that even if it catches an error, it doesn't alert() me where the error is -- you can see I've tried to implement this by concatenating the problemed text box's name onto the alert() string.

    Any ideas as for how to make my script more robust? I've been out of the coding game for quite a while now, and out of the JS game for longer. Please excuse my awful syntax.

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Ummm...
    Code:
    <input type="text" name="Left1.6">
    but
    Code:
    var batName='Front';
    HUH???


    *********

    By the by, named forms are considered very obsolete. You should give the <form> and id instead and then use document.getElementById( ) to get the reference to it.
    Last edited by Old Pedant; 12-05-2012 at 08:15 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Ummm... this is totally bogus:
    Code:
        var x=parseFloat(document.forms["entry"][batName]);
    You must convert the *VALUE* of the form field, not the field itself!
    Code:
        var x=parseFloat(document.forms["entry"][batName].value );
    But see next message.

    ********

    If you do parseFloat("zamboni") you will *NOT* get null (or any numerical value). You *WILL* get NaN which needs to be tested with the isNaN( ) function.

    Also, alert( ) is NOT the right way to give error messages. Some current browsers (and more to come) allow the user to turn off alert messages.

    You really need to put your error messages someplace on the page itself.
    Last edited by Old Pedant; 12-05-2012 at 08:28 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Here's a suggested change. May or may not fit your needs exactly:
    Code:
    <script type="text/javascript">
    function validateEntry()
    {
        var form = document.getElementById("...id of your form...);
        var msg = "";
    		
        for (shelf=1;shelf<6;shelf++)
        {
            for (bat=1;bat<11;bat++)
            {
                var batName='Front' + shelf + '.' + bat;
                var fld = forrm[batName];
                var fld.style.backgroundColor = "transparent"; // assume valid
    
                var x = Number( form[batName].value );
                if ( fld.value == "" || isNaN(x) || x<9 || x>15)
                {
                    fld.style.backgroundColor = "pink"; // indicate field in error
                    msg += batname + " is not a valid number between 9 and 15<br/>"
                }
            }
        }
        // clear or set message in place:
        document.getElementById("putErrorMessageHere").innerHTML = msg;
    
        // return true if no messages, else false
        return ( msg == "" );
    }
    </script>
    Last edited by Old Pedant; 12-05-2012 at 08:26 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey OldPendant,

    First off, thanks for the replies. You are awesome.

    As for the bankName not being equal to the input name, that was a copy-paste error. Sorry -- the pages are generated dynaically with a PHP backend and I had copy-pasted code from two differently generated pages. I assure you that when the input-box's name is "LeftX.Y", the javascript section starts with bankName='Left'. Sorry about that.

    isNaN looks like exactly what I was looking for. I should've guessed that, sorry.

    I will try to drop your JS in when I have a moment. It *looks* like it's exactly what I want, though. Quick question: The "putErrorMessageHere" element can be anything? A <p> or a <div>, for example?
    Code:
    <div id="putErrorMessageHere"><!-- This text will be populated by JavaScript?? --></div>
    OR
    <p id="putErrorMessageHere"><!-- Text here will be populated by JS? --></p>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    YES! <div> or <p> or <span> or even a <b> or <i>, believe it or not.

    Any element that can contain text.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey Again,

    I've gone ahead and tested the JavaScript you suggested and it seems to be completely non-functional. I am actually quite confused by this because it seems correct, to me.

    Here is how my form is set up:
    Code:
    <div id="errMsg"><!-- Hide --></div>
    <form action="submit.php" id="entry" method="post" onsubmit="return validateEntry()">
    <input style="width:60px" type="text" name="Top1.5">
    ... etc ...
    And my JavaScript is:
    Code:
    <script type="text/javascript">
    		function validateEntry(){
    			msg="";			
    		
    			for (var shelf=1;shelf<6;shelf++)
    			{
    				for (var bat=1;bat<11;bat++)
    				{
    					var batName='Top' + shelf + '.' + bat;
    					var fld = document.getElementById("entry");
    					var x=Number( fld[batName].value )
    			
    					fld.style.backgroundColor="transparent";
    
    					if (fld.value == "" || isNaN(x) || x<9 || x>15)
    					{
    						fld.style.backgroundColor="pink";
    						
    						msg += batName + " is not a valid voltage!<br>
    "
    					}
    				}
    			}
    			
    			document.getElementById("errMsg").innerHTML=msg;
    			return ( msg == "" );
    		}</script>
    When I leave the entire form blank, I am still allowed to submit. Correct me if I'm wrong, but this JS should *stop* the form submission if validateEntry returns false, correct?

    Thanks again,
    Aws
    Last edited by SynnerAws; 12-06-2012 at 12:15 AM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Several small typos in the code. Mea culpa. But I was just typing off the top of my head.

    But you introduced a *HUGE* error of your own with the line
    Code:
         var fld = document.getElementById("entry");
    OUCH! Not even close!

    **********

    Now actually tested, in a limited set of <input>s.
    Code:
    <body>
    <html>
    <form action="submit.php" id="entry" method="post" onsubmit="return validateEntry()">
    <input style="width:60px" type="text" name="Top1.1">
    <input style="width:60px" type="text" name="Top1.2">
    <input style="width:60px" type="text" name="Top1.3">
    <input style="width:60px" type="text" name="Top2.1">
    <input style="width:60px" type="text" name="Top2.2">
    <input style="width:60px" type="text" name="Top2.3">
    <input style="width:60px" type="text" name="Top3.1">
    <input style="width:60px" type="text" name="Top3.2">
    <input style="width:60px" type="text" name="Top3.3">
    <input type="submit">
    <div id="oops" style="color: red; font-weight: bold;"></div>
    
    <script type="text/javascript">
    function validateEntry()
    {
        var form = document.getElementById("entry");
        var msg = "";
    		
        for (shelf=1; shelf <= 3; shelf++)
        {
            for (bat=1; bat <= 3; bat++ )
            {
                var batName='Top' + shelf + '.' + bat;
                var fld = form[batName];
    
                // *** NEXT LINE OPTIONAL ***
                if ( fld == null ) { alert("ERROR! " + batName + " does not exist!"; return false; }
    
                fld.style.backgroundColor = "transparent"; // assume valid
    
                var x = Number( form[batName].value );
                if ( fld.value == "" || isNaN(x) || x<9 || x>15)
                {
                    fld.style.backgroundColor = "pink"; // indicate field in error
                    msg += batName + " is not a valid number between 9 and 15<br/>"
                }
            }
        }
        // clear or set message in place:
        document.getElementById("oops").innerHTML = msg;
    
        // return true if no messages, else false
        return ( msg == "" );
    }
    </script>
    
    </body>
    </html>
    Last edited by Old Pedant; 12-06-2012 at 12:44 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SynnerAws (12-06-2012)

  • #9
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey,

    Alright! Yea -- turns out many of my errors were typos. As a matter of fact, a missed semicolon took the whole script from working like a dream to a nightmare. Anyway, everything seems to be working perfectly, now. Thanks so much for the help; It's been a long time since I put pen to Java.

    Consider this solved!

    - Aws

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Quote Originally Posted by SynnerAws View Post
    It's been a long time since I put pen to Java.
    Ummm...you still haven't. At least not for this page.

    This is JavaSCRIPT code.

    JAVA code is *completely* different. The biggest thing similar between the two languages is the first 4 letters of their names.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •