JSFiddle - React, Tailwind, and code Playground

by manishie

HTML

<div id="page">
    <div id="masthead"></div>
    <div id="space"></div>
    <div id="navigation"> <a href="index.php"><div class="link">Home</div></a>
 <a href="login.php"><div class="link" style="background-color: #ADADAD;">Login</div></a>

    </div>
    <div id="main" style="height: 320px;">
        <form onsubmit="return validate(this)" action="login.php" method="post">
            <table border="0" cellpadding="2" cellspacing="2" style="background-color: #C3C3C3; margin-left: auto; margin-right: auto; border: 2px solid #ADADAD; font-family: monospace; width: 400px; margin-top: 75px; padding: 10px;">
                <tr>
                    <th colspan="2" align="center" style="font-family: Georgia, serif; font-size: 20px;">Login</th>
                </tr>
                <tr>
                    <td>Username</td>
                    <td>
                        <input type="text" maxlength="16" name="username" style="width: 300px;" />
                    </td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td>
                        <input type="text" maxlength="32" name="password" style="width: 300px;" />
                    </td>
                </tr>
                <tr>
                    <th colspan="2" align="right">
                        <input type="submit" value="Login" />
                    </th>
                </tr>
                <tr>
                    <th colspan="2" align="center" style="font-size: 13px;">Don't have an account? <a href="register.php" style="color: blue; text-decoration: underline;">Register here!</a>
                    </th>
                </tr>
            </table>
        </form>
    </div>
    <div id="footer">
        <p class="footerp">&copy;Copyright 2013 - <a href="http://www.srcdevelopment.net/" style="color: blue; text-decoration: underline;">www.srcdevelopment.net</a>
        </p>
    </div>
</div>

JavaScript

function validate(form) {
    fail = validateUsername(form.username.value);
    fail += validatePassword(form.password.value);
    if (fail == "") return true;
    else {
        alert(fail);
        return false;
    }
}

function validateUsername(field) {
    if (field == "") return "No Username was entered.\n";
    else if (field.length < 3) return "Usernames must be at least 5 characters.\n";
else if (/[^a-zA-Z0-9_-]/.test(field)) return "Only letters, numbers, dashes, and underscores are allowed in Usernames.";
return "";
}

function validatePassword(field) {
    if (field == "") return "No Password was entered.\n";
    else if (field.length < 8) return "Passwords must be atleast 8 characters.\n";
}