JavaScript form validation - function not running on submit.

Question

I'm currently working on some very basic validation for a form that posts a bunch of information from a web form to an SQL database with a simple PHP script. The PHP script is working fine, and the values are being posted to the database, however the validation I have written appears to be ignored. I've attempted to fix it for a while now and can't see any glaring mistakes, but apologies if it's anything trivial.

HTML:

<form name = "registerForm" method = "POST" onsubmit = "return ValidateRegistration()" action = "createUser.php">
    <p class = "register">Desired Username*</p>
    <p class = "registerDesc">Between 1 and 20 characters long</p>                  
    <input type = "text" name = "username" class = "register">
    <p class = "register">Desired Password*</p>
    <p class = "registerDesc">We won't force securty onto you; between 6 and 255 characters long. No other criteria.</p>
    <input type = "password" name = "password" class = "register">
    <p class = "register">Confirm Password*</p>
    <input type = "password" name = "confirmPassword" class = "register">
    <p class = "register">Email Adress*</p>
    <input type = "text" name = "email" class = "registerEmail">
    <p class = "register">Bio</p>
    <p class = "registerDesc">Extra information such as hobbies, occupation, background information. Maximum 4096 characters. We can do this later.</p>
    <textarea name = "bio" class = "registerBio"></textarea>
    <p><input type = "submit" class = "registerButton" value = "Register"></p>
</form>

JavaScript:

function ValidateRegistration()
{
    //username block
    var username=document.forms["registerForm"]["username"].value;
    if (username==null || username==" ")
    {
        alert("You must provide a username");
        return false;
    }       
    if (username.length>20 || username.length<1)
    {
        alert("Sorry, your username must be between 1 and 20 characters long.");
        return false;
    }
    //etc....
}

@HMarioD Thank you for the reply, I was under the impression that a return true was not needed as it would be the default? Either way adding it does not make the function work. Like I said though, thank you. — jdurc
– jdurc, Commented Dec 28, 2012 at 23:01

Stefan Profanter · Accepted Answer · 2012-12-28 23:19:27Z

2

Exactly your code is working for me:

Created following test.html file and opened in chrome:

<html>
<head>
<script>
function ValidateRegistration()
{
    //username block
    var username=document.forms["registerForm"]["username"].value;
    if (username==null || username==" ")
    {
        alert("You must provide a username");
        return false;
    }       
    if (username.length>20 || username.length<1)
    {
        alert("Sorry, your username must be between 1 and 20 characters long.");
        return false;
    }
    //etc....
}
</script>
</head>
<body>
<form name = "registerForm" method = "POST" onsubmit = "return ValidateRegistration()" action = "createUser.php">
    <p class = "register">Desired Username*</p>
    <p class = "registerDesc">Between 1 and 20 characters long</p>                  
    <input type = "text" name = "username" class = "register">
    <p class = "register">Desired Password*</p>
    <p class = "registerDesc">We won't force securty onto you; between 6 and 255 characters long. No other criteria.</p>
    <input type = "password" name = "password" class = "register">
    <p class = "register">Confirm Password*</p>
    <input type = "password" name = "confirmPassword" class = "register">
    <p class = "register">Email Adress*</p>
    <input type = "text" name = "email" class = "registerEmail">
    <p class = "register">Bio</p>
    <p class = "registerDesc">Extra information such as hobbies, occupation, background information. Maximum 4096 characters. We can do this later.</p>
    <textarea name = "bio" class = "registerBio"></textarea>
    <p><input type = "submit" class = "registerButton" value = "Register"></p>
</form>
</body>
</html>

Submitting an emtpy form alerts:

Sorry, your username must be between 1 and 20 characters long.

answered Dec 28, 2012 at 23:19

Stefan Profanter

6,9167 gold badges45 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jdurc Over a year ago

Hello, I've given that a go, but it still does the same thing - ignores the script. Thank you for your answer either way.

Stefan Profanter Over a year ago

If you are using the latest Chrome version, this should work! Do you get some errors in the Javascript console Ctrl+Shift+J?

jdurc Over a year ago

That's super strange, maybe it's some kind of problem with my XAMPP server or something. Either way, you've certainly helped as much as you can, and if it's working for you then this question is essentially moot, so I'll accept yours as the answer. Thank you for the help.

HMarioD · Accepted Answer · 2012-12-28 23:25:37Z

http://fiddle.jshell.net/hmariod/LRZkR/

<form name = "registerForm" method = "POST"  action = "createUser.php">
    <p class = "register">Desired Username*</p>
    <p class = "registerDesc">Between 1 and 20 characters long</p>                  
    <input type = "text" name = "username" class = "register">
    <p class = "register">Desired Password*</p>
    <p class = "registerDesc">We won't force securty onto you; between 6 and 255 characters long. No other criteria.</p>
    <input type = "password" name = "password" class = "register">
    <p class = "register">Confirm Password*</p>
    <input type = "password" name = "confirmPassword" class = "register">
    <p class = "register">Email Adress*</p>
    <input type = "text" name = "email" class = "registerEmail">
    <p class = "register">Bio</p>
    <p class = "registerDesc">Extra information such as hobbies, occupation, background information. Maximum 4096 characters. We can do this later.</p>
    <textarea name = "bio" class = "registerBio"></textarea>
    <p><input type = "button" onclick="ValidateRegistration();" class = "registerButton" value = "Register"></p>
</form>

function ValidateRegistration(){
    try{
        var username=document.forms["registerForm"]["username"].value;
        if (username.length < 1)
        {
            alert("You must provide a username");
            return;
        }       
        if (username.length>20 || username.length<1)
        {
            alert("Sorry, your username must be between 1 and 20 characters long.");
            return;
        }
        document.forms["registerForm"].submit();
    }catch(er){
         alert(er);
    }
}

Bill Dekel · Accepted Answer · 2012-12-28 22:55:48Z

0

I would get rid of the return in the onsubmit.

answered Dec 28, 2012 at 22:55

Bill Dekel

473 silver badges10 bronze badges

3 Comments

jdurc Over a year ago

Thank you very much for the reply, unfortunately it still won't work (that was my first thought too).

Bill Dekel Over a year ago

Do you have a JS validator/detector? Should have one built in, if not you should be able to find one for your browser. There you can see if it's actually running or not, and if so, what any issues might be.

jdurc Over a year ago

I'm developing in the latest version of chrome, so I imagine there's one built in. I'll take a look and see if I can find anything, thank you again.

HMarioD · Accepted Answer · 2012-12-28 23:06:21Z

0

Put your code inside try/catch blocks a see what's going on.

try{
  //your code
}catch(er){
  alert(er);
}

answered Dec 28, 2012 at 23:06

HMarioD

84210 silver badges18 bronze badges

Comments

Nur Rony · Accepted Answer · 2013-03-01 15:59:03Z

0

i think the problem is in your comparing line

if (username==null || username==" ")

which should be

if (username==null || username=="")

i hope it solves your problem. please let me know ;-)

answered Mar 1, 2013 at 15:59

Nur Rony

8,1138 gold badges42 silver badges48 bronze badges

1 Comment

jdurc Over a year ago

Hello! Thank you for your reply, however I'm afraid that this is no longer relevant. I re-typed the entire code and got it to work a couple of days after posting this. To this day, I have no idea what was wrong, but I am willing to assume I mistyped something somewhere. Thank you very much for your reply, though.

Collectives™ on Stack Overflow

JavaScript form validation - function not running on submit.

5 Answers 5

3 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related