javascript program error

[ravi951]

hi all,
i have created one program using javascript.i have written using javascript functions..
can u tell me what is the problem with my program i have saved it as messages.js,but the script is not executing can u tell me what went wrong.....
below is my javascript program.....

// form validation function //
 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"; 
}

[gep13]

Hello,

When you try to run the web site, are there any JavaScript errors on the page? If so, what are they?

Have you tried stepping through the JavaScript using a debugger?

Gary

[ravi951]

ya sure i have been using HTML for logging in.
below is my HTML code it is saved as 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>

also i used CSS for styling which i have saved as
messages.css.below is code for this
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;
}

also i have success page saved as success.html.below is the code..
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>

[gep13]

Hello,

Ok, so you have this:

onsubmit="return validate(this)

The first thing to check is whether this function is being called. In order to do that, make this change:

function validate() 
 {
alert('I am in the validate function');
  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;
}

And try running your code. Do you get a popup box?

Gary