Hi.
I've managed this simple snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
var usernameError = 'Invalid String username';
var passwordError = 'Invalid String password';
var emailError = 'Invalid String email';
function validateForm()
{ valid=true;
if(objForm.getAttribute('name').toString()=='frmRe gister')
{
var username = checkField(objForm.elements[1],'username');
var password = checkField(objForm.elements[2],'password');
var email = checkField(objForm.elements[3],'email');
if(!isValidString(username.value))
{
showError(username,usernameError);
}
if(!isValidString(password.value))
{
showError(password,passwordError);
}
if(!isValidEmail(email.value))
{
showError(email,emailError);
}
}
return valid;
}
function checkField(element,fieldName)
{
if(element.getAttribute('name').toString()==fieldN ame){return
element;}
else{return;}
}
function showError(element,message)
{
if(!element.errorNode)
{
addEvent(element,'change',hideError, false);
var spanContent = document.createTextNode(message);
element.nextSibling.appendChild(spanContent);
element.errorNode = spanContent;
}
valid=false;
}
function hideError(e)
{
var fInput = getTarget(e);
if(text = fInput.nextSibling.firstChild)
{
fInput.nextSibling.removeChild(text);
}
fInput.onchange=null;
fInput.errorNode=null;
}
function isValidEmail(str)
{
var regExEmail = /^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,4}){1,2}$/;
var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/;
return (regExEmail.test(str) && !str.match(illegalChars));
};
function isValidString(str)
{
var regExvalidString = /^([\w]+)$/;
return regExvalidString.test(str);
};
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener)
{
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function getTarget(e)
{
var target = window.event ? window.event.srcElement : e ? e.target :
null;
if (!target){return false;}
return target;
};
function Init()
{
objForm = document.getElementsByTagName('form')[0];
objForm.elements[1].focus();
addEvent(objForm,'submit',validateForm, false);
}
addEvent(window,'load',Init, false);
</script>
<style type="text/css">
* {
margin:0px;
padding:0px
}
a:link, a:visited,a:hover,a:active {
text-decoration : none;
color:#62AC24;
font-weight:800;
}
body {
text-align:center;
background-color:#EDF6D9;
color:#28780A
}
div#container {
margin: 0 auto;
width:750px;
text-align:left;
}
div#header {
}
div#header h1 {
text-align:center;
}
div#login {
text-align:center;
}
div#footer {
}
div#footer h3 {
text-align:center
}
img {margin:5px 0px}
/* END MAIN */
/* FORM */
form {
width:750px;
margin: 0px auto;
text-align:left;
}
form fieldset {
width:750px;
display:block;
border:1px solid #77B608;
padding:5px;
font-family:verdana, sans-serif;
margin-bottom:0.5em;
line-height:1.5em;
}
form legend {
width:150px;
margin-bottom:5px;
border:2px solid #fff;
padding:3px;
background-color:#E4F8AD;
text-align:center;
font-family:georgia, sans-serif;
font-size:1.1em;
font-weight:bold;
}
form label {
float:left;
width:250px;
margin-right:5px;
line-height:20px;
text-align:right;
}
form label a#refresh {
line-height:40px;
}
form input {
width:250px;
border:1px solid #fff;
padding-left:5px
}
form input#remember {
width:15px;
}
form input#bottom {
width:250px;
margin-top:5px;
background-color:#B4CE06;
color:#FFFFFF;
font-weight:bold
}
br.frmClear {
clear:both
}
span.errors {
color:#FF0000
}
p#invalidLogin {
color:#FF0000
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>TwriTeLy</h1>
</div>
<div id="login">
<form name="frmRegister" action="ServerSideControl" method="post">
<fieldset>
<legend>Register</legend>
<label>Username : </label>
<input type="text" name="username" value="" maxlength="32" /><span
class="errors" ></span><br class="frmClear" />
<label>Password : </label>
<input type="password" name="password" value="" maxlength="32" /><span
class="errors" ></span><br class="frmClear" />
<label>Email : </label>
<input type="text" name="email" value="" maxlength="32" /><span
class="errors" ></span><br class="frmClear" />
<label> </label>
<input id="bottom" type="submit" name="register" value="Register" />
</fieldset>
</form>
</div>
<div id="footer"><h3>By Whisher</h3></div>
</div>
</body>
</html>
Well it works fine with IE but it doesn't with FF.
I know FF is standards compliance :) then is my
mistake but I'm not able to find it out :(
Do you have any suggestion ?
I hope so ;)
Take care.
