focus should go to login input

**vinpkl** · Sep 30, 2012 05:39

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

**Pullo** · Sep 30, 2012 08:42

Quick and dirty, just check for presence of "Login" in your error message to decide where to place focus:

Code JavaScript:

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\n";
  }
  if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(whatever)){
    msg=msg+"Must Enter a valid Login-id/Email\n";
  }
  if(document.loginform.userpassword.value=='')  {
    msg= msg + "Must Enter Password\n";
  }
  if(msg != ''){
    alert(msg);
    if (msg.match("Login")){
      document.loginform.username.focus();
    }else{
      document.loginform.userpassword.focus();
    }
    return false;
  } 
  return true;
}

**vinpkl** · Sep 30, 2012 20:49

thanks pullo

vineet

**prasanthmj** · Sep 30, 2012 23:43

create a variable to keep the problem element.

Code:

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\n";
        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\n";
        if(!problem){problem = document.loginform.username};
    }
    if(document.loginform.userpassword.value=='')
    {
        msg= msg + "Must Enter Password\n";
        if(!problem){problem = document.loginform.userpassword};
    }
    if(msg != '')
    {
        alert(msg);
        problem.focus();
        return false;
    } 
    return true;
}

**vinpkl** · Oct 1, 2012 05:14

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

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>
<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\n";
	    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\n";
        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

User Tag List

Thread: focus should go to login input

Thread Tools

Display

focus should go to login input

Bookmarks

Bookmarks

Posting Permissions