Question

I have a login form but I wanna check if the fields are empty then do not submit. I did `return false’ on submit but the browser still loads a new page. How can I stop that?

JS:

var username = document.getElementById('usernameField');
    var password = document.getElementById('passwordField');
    var loginBtn = document.getElementById('loginBtn');
    var infoBox = document.getElementById('formInfo');

    var isEmpty = /^\s*$/;

    var addEventTo = function(id, type, fn, capture) {
        if (document.addEventListener) {
            id.addEventListener(type, fn, capture);
        } else {
            id.attachEvent('on'+type, fn);
        }
    };

    function checkIfAllEmpty() {
        var loginForm = document.getElementById('loginform'),
            allInputs = loginForm.getElementsByTagName('input'),
            max = allInputs.length,
            i;

            for (i = 0; i < max; i++) {
                if (allInputs[i].type !== 'submit') {

                    if (allInputs[i].match(isEmpty)) {
                        infoBox.innerHTML = 'All your fields are empty';
                        return false;
                    }
            }
        }
    }

    //addEventTo(loginBtn, 'click', checkIfAllEmpty, false);

    if (document.addEventListener) {
            loginBtn.addEventListener('submit', checkIfAllEmpty, false);
    } else {
            loginBtn.attachEvent('onsubmit', checkIfAllEmpty);
    }

HTML:

<p id="formInfo"></p>
<form id="loginForm" method="post" action="#">
    <fieldset id="loginFieldset">
        <legend>Sign in</legend>
        <ol>
            <li>
                <label for="usernameField">Username</label><input type="text" placeholder="Enter username" id="usernameField" />
                <span>Please type in your username</span>
            </li>
            <li>
                <label for="passwordField">Password</label><input type="password" placeholder="Enter password" id="passwordField" />
                <span>Please type your password</span>
            </li>
            <li>
                <input type="submit" value="Sign in" id="loginBtn" />
            </li>
        </ol>
    </fieldset>
</form>

Many thanks

Answer 1

If it ok to go with html5 (works fine with newer versions of Safari, Chrome, Firefox, Opera > 11.00 but no IE as usual), you can add the required tag in your input field.

<p id="formInfo"></p>
  <form id="loginForm" method="post" action="#">
    <fieldset id="loginFieldset">
      <legend>Sign in</legend>
      <ol>
        <li>
         <label for="usernameField">Username</label>
         <input type="text" placeholder="Enter username" id="usernameField" required />
         <span>Please type in your username</span>
        </li>
        <li>
         <label for="passwordField">Password</label>
         <input type="password" placeholder="Enter password" id="passwordField" required />
         <span>Please type your password</span>
        </li>
        <li>
            <input type="submit" value="Sign in" id="loginBtn" />
        </li>
    </ol>
</fieldset>