Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Login</title>
<style type="text/css">
h1
{
color:red;
text-align:center;
}
h2
{
color:blue;
text-align:center;
}
div
{
width:250px;
padding:20px;
border:5px solid orange;
margin:25px 250px 200px 365px;
}
p
{
text-align:center;
font-family:Times New Roman;
font-size:20px;
}
body
{
background-color:grey;
background-image:url('images.jpg');
}
</style>
<script type="text/javascript">
var REEMAIL = /^(\w+[\-\_\.])*\w+\@(\w+\.)+[A-Za-z]+$/;
function validate(form){
var userName = form.username.value;
var password = form.password.value;
var errors = [];
if (!REEMAIL.test(userName)) {
errors[errors.length] ="You must enter a valid username.";
}
if (!checkLength(userName)) {
errors[errors.length] = "You must enter a username.";
}
if (!checkLength(userName)) {
errors[errors.length] = "It is not proper email address.";
}
if (!checkLength(password)) {
errors[errors.length] = "You must enter a password.";
}
if(!checkpass(password)) {
errors[errors.length] = " Password must have more than six characters.";
}
if ( !checkRadioArray(form.container) ) {
errors[errors.length] = "You must choose any one";
}
if ( !checkCheckBox(form.jtech) && !checkCheckBox(form.indo)) {
errors[errors.length] = "You must click anyone .";
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
function checkLength(text, min, max){
min = min || 1;
max = max || 10000;
if (text.length < min || text.length > max) {
return false;
}
return true;
}
function checkpass(text,max){
max= max || 6;
if(text.length < max) {
return false;
}
return true;
}
function checkRadioArray(radioButtons){
for (var i=0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
return true;
}
}
return false;
}
function checkCheckBox(cb){
return cb.checked;
}
function reportErrors(errors){
var msg = "There were some problems...\n";
var numError;
for (var i = 0; i<errors.length; i++) {
numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form method="post" action="Process.html"
onsubmit="return validate(this);">
<div>
<p>
<h2>Login</h2>
Username: <input type="text" name="username" size="20"><br/><br/>
Password: <input type="password" name="password" size="20"><br/><br/>
<h2>Gender</h2>
<b>Select the gender</b>
<input type="radio" name="container" value="Male"> Male
<input type="radio" name="container" value="Female"> Female
<br/><br/>
<h2>Employee</h2>
<input type="checkbox" name="jtech">
Jtech
<input type='checkbox' name="indo">
Indoshell
<br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset Form">
</p>
</div>
</form>
</body>
</html>
Comment