JSFiddle - React, Tailwind, and code Playground

by lechevalierd3on

HTML

<form method="post" action="loginproc.php" onsubmit="return formValidator()" >


<tr><td colspan="3"><img src="icons/login.jpg" alt="Edugate" width="366" height="123"></td></tr>
<tr><td colspan="3" nowrap bgcolor="#990033" class="infoTitle"><div align="center"></div></td></tr>
<tr><td colspan="3" nowrap class="infoTitle"><div align="left">user login </div></td></tr>
<tr><td colspan="3" nowrap bgcolor="#990033" class="infoTitle"><div align="center"></div></td></tr>
<tr><td width="58">Username</td>
<td width="4">:</td>
<td width="297"><input type="text" id="username" name="username" size="20"></td></tr>
<tr><td>Password</td><td>:</td><td><input type="password" id="password" name="password" size="20"></td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td><input type="submit" class="BtnInTable" value="Login"></td></tr>

<tr><td colspan="3" nowrap bgcolor="#990033" class="infoTitle"><div align="center"></div></td></tr>
</form>

JavaScript

function formValidator(){
    alert("")
    // Make quick references to our fields
    var username = document.getElementById('username');
    var password = document.getElementById('password');


    // Check each input in the order that it appears in the form!
    if(notEmpty(username, "The username field is empty!")){
        if(notEmpty(password, "The password is empty!")){

        }
    }

    return false;

}

function notEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}