DOM form validation and troubles with FF...

W

whisher

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()=='frmRegister')
{
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()==fieldName){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>&nbsp;&nbsp;</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.
 
W

whisher

I'm awfully sorry I forgot
the trouble.
With FF the form is just submitted
with the error (valid is FALSE !)
Bye.
 
M

Martin Honnen

whisher said:
function validateForm()
Click to expand...

function validateForm (evt)
{ valid=true;
if(objForm.getAttribute('name').toString()=='frmRegister')
{
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);
}
}
Click to expand...

if (!valid && evt && typeof evt.preventDefault != 'undefined') {
evt.preventDefault();
}
 
W

whisher

Thanks so much buddy.
I arrived to the same conclusion.
An other annoying trouble why
it doesn't work if I put cancelClick(e)
instead of fInput.onchange=null
The new code.
<!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(e)
{ valid=true;
if(objForm.getAttribute('name').toString()=='frmRegister')
{
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);
}
if(!valid)
{
cancelClick(e);
}
}
return valid;
}
function checkField(element,fieldName)
{
if(element.getAttribute('name').toString()==fieldName){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;
////////////
//
// WHY ON EARTH IT DOESN'T IF I USE IT INSTEAD OF fInput.onchange=null

// cancelClick(e);
//
/////////
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 cancelClick(e)
{
if (window.event)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return;
}
if (e)
{
e.stopPropagation();
e.preventDefault();
}
};
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>&nbsp;&nbsp;</label>
<input id="bottom" type="submit" name="register" value="Register" />
</fieldset>
</form>
</div>
<div id="footer"><h3>By Whisher</h3></div>
</div>
</body>
</html>
TKS A LOT AGAIN !
BYE.
 
R

Richard Cornford

whisher wrote:
var usernameError = 'Invalid String username';
Click to expand...
<snip> ^^^^^^

As an aside, have you thought about the wording of this error message?
You and I may know what a "String" is but what proportion of users can
be expected to know? It is a bit like all the instances you see where
someone will state "javascript required" (or similar), which maybe makes
sense to web developers/designers (even if they often cannot tell Java
from javascript) but is most likely to be gobbledegook to your average
browser uses (who neither know nor care about web technologies).

Richard.
 
W

whisher

Richard Cornford ha scritto:
whisher wrote:

<snip> ^^^^^^

As an aside, have you thought about the wording of this error message?
You and I may know what a "String" is but what proportion of users can
be expected to know? It is a bit like all the instances you see where
someone will state "javascript required" (or similar), which maybe makes
sense to web developers/designers (even if they often cannot tell Java
from javascript) but is most likely to be gobbledegook to your average
browser uses (who neither know nor care about web technologies).

Richard.
Click to expand...

I agree with it was only a test.
I'm changing it in the real world ;)
Bye.
 
D

Dr J R Stockton

In comp.lang.javascript message
Sun said:
function isValidEmail(str)
{
var regExEmail = /^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,4}){1,2}$/;
var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/;
return (regExEmail.test(str) && !str.match(illegalChars));
};
Click to expand...


Unless one is addressing a known closed user group (in which case you
should have said so), it is naive to write a validating RegExp without
an adequate understanding of what is actually valid.

That first RegExp rejects my address for two distinct reasons. It will
also reject any address containing \W characters, such as that of my PC
supplier - and so the second RegExp appears pointless.

See <URL:http://www.merlyn.demon.co.uk/js-valid.htm>.

It's a good idea to read the newsgroup and its FAQ. See below.
 
W

whisher

Hi.
Thanks so much for your useful remarks ;)
and thanks so much again for the useful links.
The new function:
function isValidEmail(str) {
// http://www.devpro.it/php4_id_2.html
return
Boolean(str.match(/^([a-z0-9]+[\._\-]?){1,3}([a-z0-9])*\@([a-z0-9]+[\.\-]?){1,3}([a-z0-9])*\.[a-z]{2,6}$/i));
};
What do you think about it ?
Is your email valid with this ?
Take care.

Ps.
I've to master the regEx ;(
 
D

Dr J R Stockton

In comp.lang.javascript message
Wed said:
Thanks so much for your useful remarks ;)
and thanks so much again for the useful links.
Click to expand...

Because you have not quoted the preceding article and have not given a
normal attribution, there is no visible indication of who you think you
are talking to.

It's a good idea to read the newsgroup FAQ and RFC1855/FYI28 ...
 
W

whisher

Dr J R Stockton ha scritto:
In comp.lang.javascript message


Because you have not quoted the preceding article and have not given a
normal attribution, there is no visible indication of who you think you
are talking to.

It's a good idea to read the newsgroup FAQ and RFC1855/FYI28 ...

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 IE 6
FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Click to expand...


Hi.
I told you ;)
Bye.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Troubles with Fullpage / please help 0
Php modal form to email 1
How do I fix this issue in sqaurespace code block? 1
Registration Form 7
Positioning CSS components 1
I Need Help with making a function that draws in a canvas using location data. 1
Help with code 0
Gallery - mosiac/grid layout with filtering and information page popup 1

Members online

Total: 71 (members: 2, guests: 69)
Robots: 425

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top