Form validation does nothing to the form, NO HTML, ONLY JS

Question

I am trying to learn JS so i am writing code only in JS (there is only up to the body tag in my html code that uses the script).

I am trying in the condition mentioned above, to write a login form and validate it with a validation function. For some reason nothing happens when I submit the form (I believe its not even calling the validate function, since I put an alert in the beginning of it).

My code:

function validateLogin() {
    alert("CHECK");
    var username = document.getElementById('username').value;
    var pass = document.getElementById('pass').value;
    if (username === "admin" && pass === "admin") {
        return true;
    } else {
        alert("Wrong username or password!");
        return false;
    }
}

var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
var loginForm = document.createElement('form');
loginForm.className = 'loginForm';
loginForm.onsubmit = "return validateLogin()";
var username = document.createElement('input');
username.id = 'username';
var pass = document.createElement('input');
pass.id = 'pass';
pass.type = 'password';
var subm = document.createElement('input');
subm.type = 'submit';
loginForm.appendChild(document.createTextNode("Username:"));
loginForm.appendChild(username);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(document.createTextNode("Password:"));
loginForm.appendChild(pass);
loginForm.appendChild(document.createElement('br'));
loginForm.appendChild(subm);
loginForm.action = "#";
loginForm.method = "post";

loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);

edit I found that changing loginForm.onsubmit = "return validateLogin()"; into

loginForm.onsubmit = validateLogin;

solved it for me, for some reason.

Answer 1

First of all you're targeting the DOM object, not the value. Instead of:

var username = document.getElementById('username');

use:

var username = document.getElementById('username').value;

Of course this is not a good way to build an authentication system, but since it's for learning purposes, we'll go on with it. I would also not recommend using all these "appendChild" functions to create HTML. There are better ways of doing it. Look into things like MuschacheJS and how they do rendering.

Edit:

You also need to call the function validateLogin(); You could do it like this:

document.getElementById("submitButton").addEventListener("click", function(e) {
  validateLogin();
});

This code assumes that there is a button with id submitButton , but you already know how to create that.

Answer 2

Change your button code to the following:

 var subm = document.createElement('button');
 subm.innerHTML = 'click me';
 subm.onclick = validateLogin();
 subm.type = 'submit';

Answer 3

Your onsubmit attribute is not added to your form. To fix this, use .setAttribute as you can see in the code below.

A second problem is, that you don't get the value of your input fields, but the full node. For that, you need to append .value .

If you don't want that the page reloads (or redirects to any page given in the action attribute of your form when true login credentials, prepend event.preventDefault() to your validateLogin() .

function validateLogin() {    
    alert("CHECK");
    var username = document.getElementById('username').value;
    var pass = document.getElementById('pass').value;
    if(username === "admin" && pass ==="admin"){
        return true;
    } else{
        alert("Wrong username or password!");
        return false;
    }
}
var loginDiv = document.createElement('div');
loginDiv.className = 'loginDiv';
    var loginForm = document.createElement('form');
        loginForm.className = 'loginForm';
        // .setAttribute() allows to set all kind of attributes to a node
        loginForm.setAttribute("onsubmit", "return validateLogin()");
        var username = document.createElement('input');
                username.id = 'username';
            var pass = document.createElement('input');
                pass.id = 'pass';
                pass.type = 'password';
            var subm = document.createElement('input');
            subm.type = 'submit';
        loginForm.appendChild(document.createTextNode("Username:"));
        loginForm.appendChild(username);
        loginForm.appendChild(document.createElement('br'));
        loginForm.appendChild(document.createTextNode("Password:"));
        loginForm.appendChild(pass);
        loginForm.appendChild(document.createElement('br'));
        loginForm.appendChild(subm);
        loginForm.action = "#";
        loginForm.method = "post";

    loginDiv.appendChild(loginForm);
document.body.appendChild(loginDiv);