password field textbox problem

**ravi951** · Aug 8th, 2011, 12:55 AM

hi all,
i am using a simple login page with 5 fields shown below.in my login page below only the password and retype password fields textbox size decreased as compared to other fields.....
kindly tell me what happened and how to solve it......
below is the page with 5 fields.....

Code:

<!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>
<h2>Login Form </h2>
<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="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name<span>:</span></label>
    <input type="text" name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text" name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password<span>:</span></label>
    <input type="password" name="password" id="password"  >
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password<span>:</span></label>
    <input type="password" name="password2" id="password2" >
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text" name="phoneno" id="phoneno" maxlength="10" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

**kows** · Aug 8th, 2011, 08:03 AM

Could you post the CSS as well?

**ravi951** · Aug 8th, 2011, 08:18 AM

hi thank you i got the answer.
below is the css i am posting..
now i want submit button to be at middle or right.it should be strictly there only even if it shows errors it must not change its position..
presently mu submit button it is shifting to right side because if there are errors in input we give.errors are displayed to the right of the textbox....
kindly tell me how to solve.....

Code:

* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
 }

.form label 
{
  position:relative;
  float:left; 
  width:130px; 
  /*padding:10px 10px 0 0; */
  padding:10px 10px 0px 5px;
  font-weight:bold;
  /*text-align:right; */
  clear:left;
}

.form label span
{
  position:absolute;
  top:0;
  right:5px;
  color:black;
}  

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px;
  margin-top:10px;
}

.form input 
{ 
  width:11em;
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  /* position:relative;
    left:50%;       */    
    width:auto;
	clear:both;
}

**DeadlyMan** · Aug 8th, 2011, 11:46 AM

insert full source (messages1.js)

add the html and css and js and i will see what's wrong

**ravi951** · Aug 8th, 2011, 11:14 PM

k here is my messaes1.js

Code:

// 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 !== 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 no. 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;
}

below is my css code

Code:

* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
 }

.form label 
{
  position:relative;
  float:left; 
  width:130px; 
  /*padding:10px 10px 0 0; */
  padding:10px 10px 0px 5px;
  font-weight:bold;
  /*text-align:right; */
  clear:left;
}

.form label span
{
  position:absolute;
  top:0;
  right:5px;
  color:black;
}  

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px;
  margin-top:10px;
}

.form input 
{ 
  width:11em;
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  /* position:relative;
    left:50%;       */    
    width:auto;
	clear:both;
}

below is my html for login

Code:

<!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>
<h2>Login Form </h2>
<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="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name<span>:</span></label>
    <input type="text"  name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text"  name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password<span>:</span></label>
    <input type="password"  name="password" id="password"  >
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password<span>:</span></label>
    <input type="password"  name="password2" id="password2" >
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

**DeadlyMan** · Aug 20th, 2011, 11:20 AM

Java script

Code:

      function valid()
{
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var password = document.getElementById('password');
    var password2 = document.getElementById('password2');
    var phoneno = document.getElementById('phoneno');
    var valid = '0123456789';
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var obj = document.getElementById('phonenoerror');
    var i=0;
    var temp;
    

       if (name.value.length <4 || name.value.length >12){
        obj.innerHTML='Error User Name Length Must be Between 4 - 12 !';
        return false
       }

      if (email.value.length == '')
      {
        obj.innerHTML='Please enter email.';
          return false
      }
      else if (reg.test(email.value) == false)
     {
            obj.innerHTML='Invalid E-mail Address! Please re-enter.';
         return false
     }
    
        if (password.value.length < 4 || password.value.length > 12){

        obj.innerHTML='Password Length Must be Between 6 - 12 !';
        return false
    }

    if (password.value != password2.value){
        obj.innerHTML='Password Not Similar';
        return false
    }



     if (phoneno.value == '')
     {
      obj.innerHTML='This field is required. Please enter phone number';
         return false
     }
     else if (phoneno.value.length < 10)
     {
      obj.innerHTML='Invalid phone number length/characters ! Please try again.';
         return false
     }
     else
     {
      for (i=0; i < phoneno.length; i++)
     {
       temp = '' + phoneno.substring(i, i + 1);
       if (valid.indexOf(temp) == -1)
        {
        obj.innerHTML='Invalid characters in your phone no. Please try again.';
            return false
        }
      }
     }


}

Html

Code:

<!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>
<h2>Login Form </h2>
<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="messages1.css" />
<script type="text/javascript" src="messaes1.js">
</script>
</head>
<body>
<div id="wrapper">
  <form class="form" action="success1.html" onsubmit="return valid();" method="post">
    <label for="name">User Name<span>:</span></label>
    <input type="text"  name="realname" id="name" />

      
    
	<label for="email">Email Id<span>:</span></label>
    <input type="text"  name="email" id="email" />

      
	<label for="password">Password<span>:</span></label>
    <input type="password"  name="password" id="password"  />


    <label for="password2">Retype Password<span>:</span></label>
    <input type="password"  name="password2" id="password2" />


	
	<label for="phoneno">Phone no<span>:</span></label>
    <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>

and sorry for late

Thread: password field textbox problem

Thread Tools

Display

password field textbox problem

Re: password field textbox problem

password field textbox problem

Re: password field textbox problem

Re: password field textbox problem

Re: password field textbox problem

Posting Permissions