#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    698
    Rep Power
    95

    Simple form validation is not working


    The code is


    Code:
    <form name="password_change" onsubmit="return test_fields()">
    
    Enter Your Current Password: 
    <input id="my_current_password" type="password" name="current_password" size="20" value="">
    
    Enter the New Password:
    <input id="my_new_password" type="password" name="new_password" size="20" value="">
    
    Verify the New Password:
    <input id="my_verify_new_password" type="password" name="verify_new_password" size="20" value="">
    
    <input type="submit" name="submit" value="submit" class="button"> 
    </form> 
    
    <script type="text/javascript">
    function test_fields() {         
    
    if ((document.getElementById("new_password").value) != (document.getElementById("verify_new_password").value)) {
    alert("test1"); 
    alert('The two passwords are different! Please correct!') 
    return false; 
    } 
    
    if (trim(document.getElementById("my_new_password").value) == "") { 
    alert("test2"); 
    alert('The New Password field is empty! Please correct!');
    return false;       
    }
    if (document.getElementById("my_verify_new_password").value.length == 0) {
    alert("test3");             
    alert('The Password Verification field is empty! Please correct!');  
    return false;         
    }        
     return true;     
    } 
    </script>
    I leave the form empty and I press the submit button. I should get the test2 and/or test3 alerts. The test1 alert I will get when the two new password fields will be different. Since both fields are the same I will not get the first alert.

    I DON'T GET ANY ALERTS AND IT DRIVES ME NUTS!

    What's wrong with this form?

    Thanks for any suggestions.
    Evan
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    this appears to work
    Code:
    <form name="password_change" onsubmit="return test_fields();" action="" method="post">
    
    Enter Your Current Password: 
    <input id="my_current_password" type="password" name="current_password" size="20" value=""><br />
    
    Enter the New Password:
    <input id="my_new_password" type="password" name="new_password" size="20" value=""><br />
    
    Verify the New Password:
    <input id="my_verify_new_password" type="password" name="verify_new_password" size="20" value=""><br />
    
    <input type="submit" name="submit" value="submit" class="button"> <br />
    </form> 
    
    <script type="text/javascript">
    function test_fields() {  
    
    var newPassword = document.forms["password_change"]["new_password"].value;
    var verifyPassword = document.forms["password_change"]["verify_new_password"].value;       
    
    if (newPassword.trim() != verifyPassword.trim()) {
    alert("test1"); 
    alert('The two passwords are different! Please correct!') 
    return false; 
    	} 
    
    if (newPassword.trim() == "") { 
    alert("test2"); 
    alert('The New Password field is empty! Please correct!');
    return false;       
    	}
    if (verifyPassword.trim().length == 0) {
    alert("test3");             
    alert('The Password Verification field is empty! Please correct!');  
    return false;         
    	}
    }
    </script>
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    698
    Rep Power
    95
    I tested the page with a free validation service and it passed.

    I will have to start removing the css components I've added and find the point where the form works again.

    Oy!
    Evan
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    in your code from your OP, your first IF statement is using getElementById, but you are using your NAME attribute values.

    according to my researching, I believe your use of trim() is incorrect.

    but, even after fixing those items, when I tried to run your script, it didn't work until I rewrote it to what code I posted.

    Also, I don't believe your "test3" alert will ever be TRUE because your "test1" alert would fire before your "test3" would ever have a chance.

    I'm no JS guru, but, these are my observations from my research.
  8. #5
  9. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    I think you should rewrite the code rather than trying to fix it.

    A lot of the techniques you're using are heavily outdated, and there are several bad practices. Things like alert() popups or layouting with line breaks may have been acceptable in the 90s, but now it's 2013. People are used to highly dynamic user interfaces and tabbed browsing. They simply won't accept ancient popup boxes blocking the entire browser window.

    I strongly suggest to read up on modern JavaScript and UI design. This includes JavaScript frameworks like jQuery. If you're still using low-level JavaScript in the 21st century, you're doing it wrong.
    Last edited by Jacques1; December 9th, 2013 at 02:06 PM.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2003
    Posts
    698
    Rep Power
    95
    Thanks to all.

    Jacques1...you are correct
    Evan

IMN logo majestic logo threadwatch logo seochat tools logo