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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Javascript validation won't stop code from submitting

    I've got a simple comment application running on the local Google webapp framework test server, and I'm trying to validate the form w/ Javascript before it gets input to the server and throws an error.

    The problem is that the code seems to go through anyway... the Javascript never stops the code from being sent to the server.

    I've already checked that Javascript is working on the application, so it must be that my Javascript validation code is bad.

    I'd appreciated it if you guys can check the code for me and/or give me any advice on doing this kind of thing...

    The code is meant to check that the Name field is not empty and that it doesn't have more than 20 characters in it. ("push" is the id for the Submit button, and "name" is the id for the Name input field.)
    Code:
    window.onload = function(){
    button = "document.getElementById('push')"
    name = "document.getElementById('name')"
    
    button.onsubmit = function Validate(){
    if(name.value.length == 0){
      alert("please include a Name");
      return false;
      }
    else if(name.value.length > 20){
      alert("Name is too long");
      return false;
      }
    else{
      return true;
      }
    }
    }
    Last edited by nxgn; 06-25-2009 at 02:10 AM.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    20
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Cool Fixed it

    Kept googling and messing w/ it and it works now.

    I was doing a few things wrong:

    1)The onsubmit event should attach to the form, not the Submit button.

    2)document.getElementById(' ') should not have quotes around it.

    3)It has to be return validate(), since the validate function returns a "true" or "false" result. It's just literally 'true' or 'false', which means nothing unless you return that result. In other words return validate() - w/ validate () being equal to either "true" or "false" at the end of the function.

    I know this is super basic stuff, but I hope it helps someone.

    corrected code: (also I added focus() to automatically take the user to the Name field)
    Code:
    window.onload = function (){
    form = document.getElementById('form')
    name = document.getElementById('name')
    
    form.onsubmit = function() {
    return validate()
    }
    
    function validate(){
    if(form.name.value.length == 0){
        alert("Please include a Name")
        form.name.focus()
        return false
        }
    else if(form.name.value.length > 20){
        alert("Name is too long")
        form.name.focus()
        return false
        } 
    else return true
        
    }
    }
    Last edited by nxgn; 06-25-2009 at 04:40 AM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Validation of the type if(form.name.value.length == 0){ is barely worthy of the name, as even as single space or a ? will return false (i.e. pass the validation). Nor should you give the name "name" to a form element.

    Try this:-

    Code:
    function validate(){
    var n = form.uname.value;
    n = n.replace(/^\s+|\s+$/g,"");   // strip leading and trailing spaces
    if ((/[^a-z\s\-\']/gi.test(n)) || (n.length < 2)) {  // only A-Z hyphen space apostrophe are valid -  Mary-Lou O'Reilly  Minimum 2 characters
    alert ("The name contains invalid characters or is blank - please retype");
    form.uname.value = "";
    form.uname.focus();
    return false;
    }
    }

    "He's an interesting player - he has unusually short back legs." - Football commentator


  •  

    Posting Permissions

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