Simple JavaScript login form validation

Question

Just a really simple login and redirect, but the script doesn't fire since I changed the button input type to 'submit' and the onClick event to onSubmit. All is does now is just add the username and password as a string to the url.

<form name="loginform">
    <label>User name</label>
    <input type="text" name="usr" placeholder="username"> 
    <label>Password</label>
    <input type="password" name="pword" placeholder="password">
    <input type="submit" value="Login" onSubmit="validateForm();" />
</form>

<script>
    function validateForm() {
        var un = document.loginform.usr.value;
        var pw = document.loginform.pword.value;
        var username = "username"; 
        var password = "password";
        if ((un == username) && (pw == password)) {
            window.location = "main.html";
            return false;
        }
        else {
            alert ("Login was unsuccessful, please check your username and password");
        }
      }
</script>

The script doesn't work. It just adds ?usr=username&pword=password to the url instead of window.location — Dan Mitchell
– Dan Mitchell, Commented Apr 17, 2014 at 13:45
Did you type "username" in username field and "password" in password field? Because otherwise it will not pass your if statement. — Karlen Kishmiryan
– Karlen Kishmiryan, Commented Apr 17, 2014 at 13:46
Just put onSubmit handler on the form tag instead of input. — Karlen Kishmiryan
– Karlen Kishmiryan, Commented Apr 17, 2014 at 13:51
The script fires now, when I inputing nothing it goes to the else statement and then prints the ?usr=&pword= in the url but when I enter the correct username and password it still puts ?usr=username&pword=password on the url — Dan Mitchell
– Dan Mitchell, Commented Apr 17, 2014 at 13:53

Karlen Kishmiryan · Accepted Answer · 2014-04-17 14:34:41Z

7

The input tag doesn't have onsubmit handler. Instead, you should put your onsubmit handler on actual form tag, like this:

<form name="loginform" onsubmit="validateForm()" method="post">

Here are some useful links:
- JavaScript Form Validation
- Form onsubmit Event
For the form tag you can specify the request method, GET or POST. By default, the method is GET. One of the differences between them is that in case of GET method, the parameters are appended to the URL (just what you have shown), while in case of POST method there are not shown in URL.

You can read more about the differences here.

UPDATE:

You should return the function call and also you can specify the URL in action attribute of form tag. So here is the updated code:

<form name="loginform" onSubmit="return validateForm();" action="main.html" method="post">
    <label>User name</label>
    <input type="text" name="usr" placeholder="username"> 
    <label>Password</label>
    <input type="password" name="pword" placeholder="password">
    <input type="submit" value="Login"/>
</form>

<script>
    function validateForm() {
        var un = document.loginform.usr.value;
        var pw = document.loginform.pword.value;
        var username = "username"; 
        var password = "password";
        if ((un == username) && (pw == password)) {
            return true;
        }
        else {
            alert ("Login was unsuccessful, please check your username and password");
            return false;
        }
  }
</script>

edited Apr 17, 2014 at 14:34

answered Apr 17, 2014 at 14:04

Karlen Kishmiryan

7,5726 gold badges38 silver badges46 bronze badges

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

2 Comments

Dan Mitchell Over a year ago

Almost works 100%, it redirects to main.html but the string is still be added to the url.. any ideas?

Karlen Kishmiryan Over a year ago

Oh, I forget to add method type. I've updated the code.

TriniBoy · Accepted Answer · 2014-04-17 14:06:35Z

2

You can do two things here either move the onSubmit attribute to the form tag, or change the onSubmit event to an onCLick event.

Option 1

<form name="loginform" onSubmit="return validateForm();">

Option 2

<input type="submit" value="Login" onClick="return validateForm();" />

answered Apr 17, 2014 at 14:06

TriniBoy

6903 silver badges10 bronze badges

1 Comment

firien Over a year ago

@DanMitchell, just make sure validateForm always returns false;

Brandon · Accepted Answer · 2018-06-18 03:18:36Z

2

<!DOCTYPE html>
<html>
<head>
<script>
function vali() {
var u=document.forms["myform"]["user"].value;
var p=document.forms["myform"]["pwd"].value;
if(u == p) {
alert("Welcome");
window.location="sec.html";
return false;
}
else
{
alert("Please Try again!");
return false;
}
}
</script>
</head>
<body>
<form method="post">
<fieldset style="width:35px;">  <legend>Login Here</legend>
<input type="text" name="user" placeholder="Username" required>
<br>
<input type="Password" name="pwd" placeholder="Password" required>
<br>
<input type="submit" name="submit" value="submit" onclick="return vali()">
</form>
</fieldset>
</html>

edited Jun 18, 2018 at 3:18

Brandon

36 bronze badges

answered Feb 13, 2015 at 13:20

user2057037

212 bronze badges

Comments

Aheinlein · Accepted Answer · 2014-04-17 13:51:58Z

1

<form name="loginform" onsubmit="validateForm()">

instead of putting the onsubmit on the actual input button

answered Apr 17, 2014 at 13:51

Aheinlein

4722 gold badges7 silver badges19 bronze badges

Comments

Linek · Accepted Answer · 2014-04-17 13:52:43Z

1

Add a property to the form method="post".

Like this:

<form name="loginform" method="post">

answered Apr 17, 2014 at 13:52

Linek

1,36310 silver badges20 bronze badges

Comments

Jean-François Fabre · Accepted Answer · 2021-05-31 20:42:41Z

0

function validate() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        if (username == null || username == "") {
            alert("Please enter the username.");
            return false;
        }
        if (password == null || password == "") {
            alert("Please enter the password.");
            return false;
        }
        alert('Login successful');
        
    } 

  <input type="text" name="username" id="username" />
  <input type="password" name="password" id="password" />
  <input type="button" value="Login" id="submit" onclick="validate();" />

edited May 31, 2021 at 20:42

Jean-François Fabre♦

141k24 gold badges179 silver badges246 bronze badges

answered Apr 23, 2015 at 11:36

Barath Kumar

4393 silver badges7 bronze badges

2 Comments

Kevin Brown-Silva Over a year ago

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked.

Barath Kumar Over a year ago

Oh Sorry, I forget to add some explanation. I Will do it in my further answers.

Collectives™ on Stack Overflow

Simple JavaScript login form validation

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related