How are you invoking these functions? I think we are only seeing part of the picture with your JavaScript, do you have something extra that you use to run this to validate your form?
yes i have HTML page for login it is saved as login.html which is used for logging in to the form…
below is the code for login.html
<!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>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
<label for="name">User Name:</label>
<input type="text" name="name" id="name" />
<label for="email">Email Id:</label>
<input type="text" name="email" id="email" />
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<label for="repassword">Retype Password:</label>
<input type="text" name="repassword" id="repassword" />
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>
below is my CSS code which i used for styling.it is saved as
messages.css
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:black;
}
#wrapper
{
width:600px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:#f3e6e6;
border:2px solid red;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
below is my HTML code for success which i saved as
success.html
<!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>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
Successfully submitted!
</div>
</body>
</html>
To begin with, neither of these realname pieces exist.
var eobj=document.getElementById('realnameerror');
var sRealName = form.realname.value;
No element in your HTML code has an id of “realnamerror” nor do any of your form elements have a name of “realname”
then do you think i dont need to declare these things in javascript functions i have written…
That is correct, no more than they currently are.
then the functions i have written using javascript is it correct method to save as
messages.js…
what will contain in file saved as .js
Did you write the script code yourself, or take it from somewhere else in the hopes that you might be able to make it work?
i have modified the original code and i had to do it using the CSS so yhat it looks stylish displaying errors in the color we want.
but i want to do on javascript which is new to me…
absolutely no idea on integrating HTML,CSS and javascript…
but i know individually…
Okay, well I’m not in a position to be able to teach you how to do that at the moment.
actually this is all about the INLINE VALIDATION for the login form means you must warnings or errors when filling the login form…
i.e., you get errors beside the textbox.
i have done perfectly in HTML using javscript…
but i want to display in style using CSS and i want login form like real time applications.so i want to integrate so that i can get real time applications…
can u tell me where can you find this type of real time inline validation and how they will be used…
Let’s compare the form names with the names and error locations that the script expects.
Field names Script names Error locations
-------- -------- --------
name realname realnameerror
email email emailerror
password password passworderror
repassword password2 password2error
phoneno phoneno phonenoerror
For the script to work at all, the field names in the HTML code and the names in the script must all match.
It’s up to you to decide whether to change the field name or the script names.
The other thing that needs to be done is for you to put in the form a place for each of the error messages. With the script the way it currently is, it means adding to your HTML a place to show the error. If you decide to change the HTML field names of the form, that would result in the following:
<input type="text" name="realname" id="name" />
<span id="realnameerror">error</span>
and using some CSS to present it appropriately:
.form span {
float: left;
margin-top: 1em;
margin-left: 0.5em;
color: red;
}
i have changed the html fields and replaced with fields in script.also included the span tag with error.but it is displaying error beside the text box even before i am about to do any thing…
below is my modified HTML with fields as in messages.js
<!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>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
<form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
<label for="name">User Name:</label>
<input type="text" name="realname" id="name" />
<span id="realnameerror">error</span>
<label for="email">Email Id:</label>
<input type="text" name="email" id="email" />
<span id="emailerror">error</span>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
<span id="passworderror">error</span>
<label for="repassword">Retype Password:</label>
<input type="text" name="repassword" id="repassword" />
<span id="password2error">error</span>
<label for="phoneno">Phone no:</label>
<input type="text" name="phoneno" id="phoneno" />
<span id="phonenoerror">error</span>
<input type="submit" value="Submit" class="submit" />
</form>
</div>
</body>
</html>
also i changed the CSS…
*
{
margin:0;
padding:0;
}
body
{
font:12px Verdana, Arial, Helvetica, sans-serif;
color:black;
}
#wrapper
{
width:600px;
margin:50px auto;
}
.form
{
float:left;
padding:10px 10px 10px 10px;
background:lightblue;
border:2px solid white;
}
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px;
font-weight:bold;
clear:left;
}
.form span
{
float:left;
margin-top:1em;
matrgin-left:0.5em;
color:red;
}
.form select
{
float:left;
width:146px;
margin-top:10px;
}
.form input
{
float:left;
margin-top:10px;
}
.form .submit
{
clear:both;
}
#msg
{
display:none;
position:absolute;
z-index:200;
background:url(images/msg_arrow.gif) left center no-repeat;
padding-left:7px;
}
#msgcontent
{
display:block;
background:#f3e6e6;
border:2px solid red;
border-left:none;
padding:5px;
min-width:150px;
max-width:250px;
}
but it is not executing i think i have doubt in messages.js function only.
what went wrong…
That is due to the contents of the span in your HTML code.
Leave the span empty and the error message won’t show until the script is run.
i have removed error in the span tag.when i click the submit button even before giving values it is displaying success message…
i want to display error actually in login form if we enter any wrong values.
why it is not displaying errors…
Because there is more going wrong that needs to be fixed. We’ll take it step by step.
I’m out on the road right now, but will be able to investigate further in some hours time.
k i have identified in the login.html i have
<form name=“form” id=“form” class=“form” action=“success.html” onsubmit=“return validate(this)” method=“post”>
but in my messages.js i have not included that one…1st thing
and then i have checked using function validate(form) as…below
// form validation function //
function validate(form)
{
function checkName(form)
{
var eobj=document.getElementById('realnameerror');
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var error=false;
eobj.innerHTML='';
if (sRealName == '')
{
error='Error: Username cannot be blank!';
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
else if (!oRE.test(sRealName))
{
error="Incorrect format.";
}
if (error)
{
if (hasFocus == false)
{
form.realname.focus();
hasFocus = true;
}
eobj.innerHTML=error;
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
var eobj=document.getElementById('emailerror');
eobj.innerHTML='';
var error = false;
if (form.email.value.length == 0)
{
error = 'Please enter email.';
} else if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
{
return true;
} else
{
error = 'Invalid E-mail Address! Please re-enter.';
}
if (error)
{
eobj.innerHTML=error;
if (!hasFocus)
{
form.email.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validatePwd(form) /* password & retype-password verification */
{
var eobj1=document.getElementById('passworderror');
var eobj2=document.getElementById('password2error');
var minLength=6;
var invalid=' ';
var pw1=form.password.value;
var pw2=form.password2.value;
var error=false;
eobj1.innerHTML='';
eobj2.innerHTML='';
if (pw1.length<1)
{
error='Please enter your password.';
}
else if (pw1.length < minLength)
{
error='Your password must be at least ' + minLength + ' characters long. Try again.';
}
else if (pw1.indexOf(invalid) > -1)
{
error='Sorry, spaces are not allowed.';
}
else if (pw2.length == 0)
{
error='Please retype password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
eobj2.innerHTML=error;
return false;
}
if (error)
{
if (!hasFocus)
{
form.password.focus();
hasFocus = true;
}
eobj1.innerHTML=error;
return false;
}
if (pw1 != pw2)
{
eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validPhone(form) /* phone no validation */
{
var eobj=document.getElementById('phonenoerror');
var valid = '0123456789';
var phone = form.phoneno.value;
var error=false;
var i=0;
var temp;
eobj.innerHTML='';
if (phone == '')
{
error='This field is required. Please enter phone number';
}
else if (!phone.length > 1 || phone.length < 10)
{
error='Invalid phone number length! Please try again.';
}
else
{
for (i=0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
error='Invalid characters in your phone. Please try again.';
}
}
}
if (error)
{
if (!hasFocus)
{
form.phoneno.focus();
hasFocus = true;
}
eobj.innerHTML=error;
return false;
}
return true;
}
function validate()
{
hasFocus = false;
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++)
{
if (!ary[z0](form))
{
rtn=false;
}
}
return rtn;
}
}
// START OF MESSAGE SCRIPT //
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = "none";
clearInterval(msg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}
There is no need for you to make any changes to the script. From what I see there, you have only guaranteed that the script will fail.
The only changes that need to occur are to bring the HTML elements of the form in line with what the script expects there to be there. That being, to match up the names of the form elements, and to have the error sections there.
i have modified the messages.js which is below.
but it is also not executing…
is there any thing wrong in the below script…
// form validation function //
function validate()
{
var form = document.forms['form'];
var ary = [checkName,checkEmail,validatePwd,validPhone];
var rtn = true;
var z0 = 0;
for (var z0 = 0; z0 < ary.length; z0++)
{
if (!ary[z0](form))
{
rtn = false;
}
}
return rtn;
}
function checkName(form)
{
var eobj = document.getElementById('realnameerror');
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var error = false;
eobj.innerHTML = '';
if (sRealName == '')
{
error = 'Error: Username cannot be blank!';
}
else if (sRealName.length < 4)
{
error = "UserName should be atleast 4 characters long";
}
else if (!oRE.test(sRealName))
{
error = "Incorrect format.";
}
if (error)
{
if (hasFocus == false)
{
form.realname.focus();
hasFocus = true;
}
eobj.innerHTML = error;
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
var eobj = document.getElementById('emailerror');
eobj.innerHTML = '';
var error = false;
if(form.email.value.length == 0)
{
error = 'Please enter email.';
} else if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
{
return true;
} else
{
error = 'Invalid E-mail Address! Please re-enter.';
}
if (error)
{
eobj.innerHTML = error;
if (!hasFocus)
{
form.email.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validatePwd(form) /* password & retype-password verification */
{
var eobj1 = document.getElementById('passworderror');
var eobj2 = document.getElementById('password2error');
var minLength = 6;
var invalid = ' ';
var pw1 = form.password.value;
var pw2 = form.password2.value;
var error = false;
eobj1.innerHTML = '';
eobj2.innerHTML = '';
if (pw1.length < 1)
{
error = 'Please enter your password.';
}
else if (pw1.length < minLength)
{
error = 'Your password must be at least ' + minLength + ' characters long. Try again.';
}
else if (pw1.indexOf(invalid) > -1)
{
error = 'Sorry, spaces are not allowed.';
}
else if (pw2.length == 0)
{
error = 'Please retype password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
eobj2.innerHTML = error;
return false;
}
if (error)
{
if (!hasFocus)
{
form.password.focus();
hasFocus = true;
}
eobj1.innerHTML = error;
return false;
}
if (pw1 != pw2)
{
eobj2.innerHTML = ' passwords not matching.Please re-enter your password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validPhone(form) /* phone no validation */
{
var eobj = document.getElementById('phonenoerror');
var valid = '0123456789';
var phone = form.phoneno.value;
var error = false;
var i = 0;
var temp;
eobj.innerHTML = '';
if (phone == '')
{
error = 'This field is required. Please enter phone number';
}
else if (!phone.length > 1 || phone.length < 10)
{
error = 'Invalid phone number length! Please try again.';
}
else
{
for (i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
error = 'Invalid characters in your phone. Please try again.';
}
}
}
if (error)
{
if (!hasFocus)
{
form.phoneno.focus();
hasFocus = true;
}
eobj.innerHTML = error;
return false;
}
return true;
}
// START OF MESSAGE SCRIPT //
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = "none";
clearInterval(msg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}
What did you modify?
There was nothing wrong with the original script. You should go back to the working script that you started with.