Focus should go to login input

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;
}

thanks pullo

vineet

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;
}    



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