...

View Full Version : css format



ravi9510
07-28-2011, 06:47 AM
hi all,
i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
how to display the 5th field in correct format...below is the code i have written in css..

if there are more than 4 fields tell me how to display all in correct format.

.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px 0;
font-weight:bold;
}

abduraooft
07-28-2011, 09:23 AM
below is the code i have written in css..
Please post your HTML as well.

web tasarım
07-28-2011, 09:31 AM
my friend you better send us your form complately so I can understand what is the problem, it seems all is ok but you may simply multipy the css code by giving diffrent names like .label1 .label2 .label3

ravi9510
07-28-2011, 09:46 AM
below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
user name .i am not getting for the other fields can u tell me how to do it..
if possible using CSS also.



<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj=document.getElementById('realnameerror');
eobj.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error){
eobj.innerHTML=error;
return false
}
return true;
}

function checkEmail(form) /* for email validation */
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}

alert('Invalid E-mail Address! Please re-enter.');
return false;
}

function validatePwd(form) /* password & retype-password verification */
{
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;


if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}


if (form.password.value.length < minLength)
{
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}

if (document.form.password.value.indexOf(invalid) > -1)
{
alert('Sorry, spaces are not allowed.');
return false;
}
else
{
if (pw1 != pw2)
{
alert('You did not enter the same new password twice. Please re-enter your password.');
return false;
}
else
{
alert('Passwords Match.');
return false;
}

return false;
}
}

function validPhone(form) /* phone no validation */
{
var valid = '0123456789';
phone = form.phoneno.value;

if (phone == '')
{
alert('This field is required. Please enter phone number');
return false;
}

if (!phone.length > 1 || phone.length < 10)
{
alert('Invalid phone number length! Please try again.');
return false;
}

for (var i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);

if (valid.indexOf(temp) == -1)
{
alert('Invalid characters in your phone. Please try again.');
return false;
}
}

return true;
}

function validate() {
var form = document.forms['form'];

if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}

return true;
}
</script>
</head>
<body>

<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
<br>
E-Mail : <input type="text" name="email" size="25">
<br>
Password : <input type="password" name="password" maxlength="12" size="25">
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25">
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

ravi9510
07-28-2011, 10:04 AM
hi all,
below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
checkName() .i am not getting for the other fields can u tell me how to do it..



<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj=document.getElementById('realnameerror');
eobj.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error){
eobj.innerHTML=error;
return false
}
return true;
}

function checkEmail(form) /* for email validation */
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}

alert('Invalid E-mail Address! Please re-enter.');
return false;
}

function validatePwd(form) /* password & retype-password verification */
{
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;


if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}


if (form.password.value.length < minLength)
{
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}

if (document.form.password.value.indexOf(invalid) > -1)
{
alert('Sorry, spaces are not allowed.');
return false;
}
else
{
if (pw1 != pw2)
{
alert('You did not enter the same new password twice. Please re-enter your password.');
return false;
}
else
{
alert('Passwords Match.');
return false;
}

return false;
}
}

function validPhone(form) /* phone no validation */
{
var valid = '0123456789';
phone = form.phoneno.value;

if (phone == '')
{
alert('This field is required. Please enter phone number');
return false;
}

if (!phone.length > 1 || phone.length < 10)
{
alert('Invalid phone number length! Please try again.');
return false;
}

for (var i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);

if (valid.indexOf(temp) == -1)
{
alert('Invalid characters in your phone. Please try again.');
return false;
}
}

return true;
}

function validate() {
var form = document.forms['form'];

if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}

return true;
}
</script>
</head>
<body>

<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
<br>
E-Mail : <input type="text" name="email" size="25">
<br>
Password : <input type="password" name="password" maxlength="12" size="25">
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25">
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

ravi9510
07-28-2011, 01:00 PM
it is just a simple one with out using CSS ..
first i want to complete this one and then i go for CSS using which different
styles can be implemented....
i have tried for other functions also not knowing what is the error..
can any one tell me how to solve.....
below is the modified code.......



<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var eobj1=document.getElementById('realnameerror');
eobj1.innerHTML='';
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealName);
var error=false;
if (!isCorrectFormat)
{
error="Incorrect format.";
form.realname.select();
form.realname.focus();
}

else if (sRealName == '')
{
error='Error: Username cannot be blank!';
form.realname.focus();
}
else if (sRealName.length < 4)
{
error="UserName should be atleast 4 characters long";
}
if (error)
{
eobj1.innerHTML=error;
return false;
}
return true;
}

function checkEmail(form) /* for email validation */
{
var eobj2=document.getElementById('emailerror');
eobj2.innerHTML='';
var error=false;
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}
else
error='Invalid E-mail Address! Please re-enter';
return false;
}

function validatePwd(form) /* password & retype-password verification */
{
var eobj3=document.getElementById('passworderror');
eobj3.innerHTML='';
var error=false;
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;

if (pw1 == '' || pw2 == '')
{
error='Please enter your password twice.';
return false;
}

if (form.password.value.length < minLength)
{
error='Your password must be at least ' + minLength + ' characters long. Try again.';
return false;
}

if (document.form.password.value.indexOf(invalid) > -1)
{
error='Sorry, spaces are not allowed.';
return false;
}
else
{
if (pw1 != pw2)
{
error='You did not enter the same new password twice. Please re-enter your password.';
return false;
}
else
{
error='Passwords Match.';
return false;
}

return false;
}
}

function validPhone(form) /* phone no validation */
{
var eobj4=document.getElementById('phonenoerror');
eobj4.innerHTML='';
var valid = '0123456789';
phone = form.phoneno.value;

if (phone == '')
{
error:'This field is required. Please enter phone number';
return false;
}

if (!phone.length > 1 || phone.length < 10)
{
error:'Invalid phone number length! Please try again.';
return false;
}

for (var 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.';
return false;
}
}
if (error)
{
eobj4.innerHTML=error;
return false;
}
return true;
}

function validate() {
var form = document.forms['form'];

if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}

return true;
}
</script>
</head>
<body>

<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
<br>
E-Mail : <input type="text" name="email" size="25"><span id="emailerror "></span>
<br>
Password : <input type="password" name="password" maxlength="12" size="25"><span id="passworderror "></span>
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25"><span id="repassworderror"></span>
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25"><span id="phonenoerror"></span>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum