Sunday, May 26, 2013

Simple Login HTML page with Javascript validation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dalal System</title>
<script type="text/javascript" src="js/jquery1_3.js"></script>
<script type="text/javascript">
    function check_validation()
    {
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        //alert(username);
        if(username == "" || password == "")
        {
            alert("Please fill the username and password");
            $('#username').focus();
            return false;
            //document.getElementById("username").focus();
        }
    }
</script>
</head>

<body>
    <fieldset style="width:23%; position:relative; margin-top:19%; margin-left:40%"><legend>LogIn</legend>
    <form name="login_form" id="login_form" method="post" onsubmit="return check_validation()">
    <div align="center">
        <table border=0>
            <tr>
                <td>
                    Username:   
                </td>
                <td>
                    <input type="text" name="username" id="username" placeholder="Username" />
                </td>
            </tr>
            <tr>
                <td>
                    Password:   
                </td>
                <td>
                    <input type="password" name="password" id="password" placeholder="Password" onpaste="alert('Copy and Paste are strictly prohibited on Password'); return false;" oncopy="alert('Copy and Paste are strictly prohibited on Password'); return false;"/>
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="LogIn" name="login" id="login" />
                    <input type="reset" value="Cancel">
                 </td>
            </tr>
        </table>
    </div>
    </form>
    </fieldset>
 
</body>
</html>

No comments:

Post a Comment