vinpkl
September 30, 2012, 12:39pm
1
hi all
below is link to my login page which i want to validate
http://wdpixels.com/stuff/login_validation.html
if both login and password fields are empty
then after clicking the ok button of alert message box, the focus should go inside “login” input field but it goes into “password” field
vineet
Quick and dirty, just check for presence of “Login” in your error message to decide where to place focus:
function validate()
{
var msg="";
var whatever = document.getElementById("username").value.replace(/^\\s\\s*/, '').replace(/\\s\\s*$/, '').replace(/ {2,}/g," ")
if(document.loginform.username.value=='') {
msg="Must Enter Login-ID\
";
}
if (!/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,4})+$/.test(whatever)){
msg=msg+"Must Enter a valid Login-id/Email\
";
}
if(document.loginform.userpassword.value=='') {
msg= msg + "Must Enter Password\
";
}
if(msg != ''){
alert(msg);
if (msg.match("Login")){
document.loginform.username.focus();
}else{
document.loginform.userpassword.focus();
}
return false;
}
return true;
}
create a variable to keep the problem element.
function validate()
{
var msg="";
var whatever = document.getElementById("username").value.replace(/^\\s\\s*/, '').replace(/\\s\\s*$/, '').replace(/ {2,}/g," ");
var problem=null;
if(document.loginform.username.value=='')
{
msg="Must Enter Login-ID\
";
if(!problem){problem = document.loginform.username;}
}
if (!/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,4})+$/.test(whatever))
{
msg=msg+"Must Enter a valid Login-id/Email\
";
if(!problem){problem = document.loginform.username};
}
if(document.loginform.userpassword.value=='')
{
msg= msg + "Must Enter Password\
";
if(!problem){problem = document.loginform.userpassword};
}
if(msg != '')
{
alert(msg);
problem.focus();
return false;
}
return true;
}
vinpkl
October 1, 2012, 12:14pm
5
hi
i tried to incorporate inline error display validation with your code
The error message displays fine but the it doesnt disappear even after when i enter the username
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function validate()
{
var msg="";
var problem=null;
if(document.loginform.username.value=='')
{
msg="Must Enter Login-ID\
";
if(!problem){problem = document.loginform.username;
document.getElementById("username_error").innerHTML = '<span style="color: red">* username not valid</span>';
}
}
if(document.loginform.userpassword.value=='')
{
msg= msg + "Must Enter Password\
";
if(!problem){problem = document.loginform.userpassword};
}
if(msg != '')
{
alert(msg);
problem.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form id="loginform" name="loginform" method="post" onsubmit="return validate();" action="">
<p><label>Enter User Id</label><input type="text" id="username" name="username" class="logininput" />
<span id="username_error"></span></p>
<p><label>Enter Password</label><input type="password" name="userpassword" id="userpassword" class="logininput" /></p>
<input type="submit" value="submit" class="login_bt" name="login_submit" /></p>
</form>
</body>
</html>
vineet