I am trying to have the below javascript popup a message box automatically once all the fields return valid. The aim is that i will change this to a image swap in the future. (i have a button with a x in it i want it to change to a √ once the form passes basic validation).
Is this possible with javascript? I am very new to meddling with javascript.
login.tpl.htm
login.js
Is this possible with javascript? I am very new to meddling with javascript.
login.tpl.htm
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nanashi - Software Engineering</title>
<link rel="stylesheet" type="text/css" href="/style/css/base.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/style/css/login.css" media="screen" />
<script src="../javascript/login/login.js" type="text/javascript"> </script>
</head>
<body onLoad="submitButton(this)">
<div class="wrapper">
<div id="header">
<h1>Group 10 Project Intranet</h1>
<div id="menu">
<ul id="nav">
<li class="activelink"><a href="/">Login</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="full">
<div id="wrapper">
<form name="form" id="form" class="form" action="/login" onsubmit="return validate(this)" method="post">
<p>
<h2>Login</h2>
<p>
<label for="name">Username</label><br />
<input class="title" id="name" name="user" size="30" type="text" />
</p>
<p>
<label for="password">Password</label><br />
<input type="password" class="title" id="password" name="password" size="30" />
</p>
<p>
<input type="submit" value="Submit" class="submit" />
</p>
</p>
</form>
</div>
</div>
</div>
<div class="push">
</div>
</div>
<div id="footer">
<p>© Copyright 2009 Nanashi. All rights reserved.<br /><a href="http://nanashi.co.uk">Nanashi Web Development</a></p>
</div>
</body>
</html>login.js
Code:
function submitButton(form)
{
var name = form.name.value;
var password = form.password.value;
var valPassLength = password.length;
var valUserLength = name.length;
var nameRegex = /^[a-zA-Z0-9]+(([\'\,\.\- ][a-zA-Z0-9 ])?[a-zA-Z0-9]*)*$/;
var passwordRegex = /^[a-zA-Z0-9]+(([\'\,\.\- ][a-zA-Z0-9 ])?[a-zA-Z0-9]*)*$/;
if(name == "") {
inlineMsg('name','You must enter your username.',2);
return false;
}
if(!name.match(nameRegex)) {
return false;
}
if (valUserLength < 7)
{
return false;
}
if(password == "") {
return false;
}
if(!password.match(passwordRegex)) {
return false;
}
if (valPassLength < 10)
{
return false;
}
return true;
alert("true");
}
