SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    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;
    }

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    thanks pullo

    vineet

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •