Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0

    Javascript validation, does user exist?


    I'm trying to take some form validation one step further. Basically I have a section to create a new user account and javascript checks to see if the username/password fields were completed.

    What would really be nice is at the same time, check to see if an account with that username already exists and pop up that message as well. That way, I don't have to try and tackle this on the server side, re-populate the form, etc etc.

    Just a quick check upon clicking submit that:

    onclick: "select username from users where username = formfield.username"

    if RS == 0 {
    submit
    } else {
    popup: "username already exists, please choose another"
    }


    Is this possible? We are only talking a few hundred users so it shouldn't put a strain on the system.


    Thanks in advance for any tips!
  2. #2
  3. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2000
    Location
    Enschede, The Netherlands
    Posts
    1,527
    Rep Power
    16
    I don't have to try and tackle this on the server side
    If you start quering the database with a SQL statement it's server-side... (which is the way to go btw IMO). You *could* try something like this by passing ALL usernames to the client so you can do this with javascript but it's (1) unsafe and (2) an extra load since your page will have at least a couple of hundreds names (*5-8 characters each?) extra...

    Regards
    There are 10 types of people in this world - those who understand binary and those who don't...

    PHP | MySQL | DevShed Forum Search | Google Search
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Yeah, server-side is the way to go, but for some reason I had this crazy idea this morning.

    I remember doing something like this years ago where based on a certain radio button selection, I'd run a query and populate a drop down. Unfortunately I can't find that code now.


    I was just hoping to avoid passing the entire form to the server, checking the username, then having to redisplay and populate the form entries and tell them that user is chosen. That's normally what I do but it just adds to the mess of code already there and it's a lengthy form.

  6. #4
  7. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,944
    Rep Power
    4033
    You could do it using hidden images, but I'd just go for a server side method. It's not a big deal to re-echo the form w/ the values, just make a function.
    PHP Code:
    function showLogin($uname$pword){
    ....

  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Originally posted by kicken
    You could do it using hidden images, but I'd just go for a server side method. It's not a big deal to re-echo the form w/ the values, just make a function.
    PHP Code:
    function showLogin($uname$pword){
    ....

    Hidden images?

    Hmmm.... how does this function work exactly? Right now I'm using the same script/form to see if they are adding or editing a user account. So the form has echos in each value of $RS["fieldname"] already, so I'd have to have a function that either looks for POST_VARS or database values.

    Again, could get messy so I was hoping to handle this somewhat client side or before content submission.
  10. #6
  11. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,944
    Rep Power
    4033
    well, since you just want to check if they are there, it's a yes/no answer. You can do simple things like that with images using the onload/onerror event handlers or should be able to at least. I've done it before, but it was a different thing.

    PHP Code:
    //response.php
    //blank.gif is a 1x1 transparent gif image.
    if (isset($_POST['n'])){
       
    header('HTTP/1.1 200 ok');
       
    header('Content-type: image/giff');
       
    readfile('blank.gif');
       exit;
    }

    $query="SELECT 1 FROM users WHERE username='{$_POST['u']}'";
    $res=mysql_query($query);
    if (
    mysql_num_rows($res)==1){
      
    header('HTTP/1.1 200 Ok');
      
    header('Content-type: image/gif');
      
    readfile('blank.gif');
    }
    else {
      
    header('HTTP/1.1 404 Not found');
      echo 
    'User doesn\'t exist';


    JS Code:
    Code:
    <img src="response.php?n=1" width="1" height="1" name="checkimg" onLoad="response(true);" onerror="response(false);">
    <script type="text/javascript">
    <!--
    function checkUsername(){
       document.checkimg.src='response.php?u='+escape(document.formName.fieldName.value);
    }
    
    function response(exists){
     if (!exists){
       alert('Username doesn\'t exist');
     }
     else {
        document.formName.submit();
     }
    }
    //-->
    </script>

    As far as the server-side function option goes, you just make a function that will write out your form/errors and that's all. Then you'd use some if's to decide how to call the function. Basic example:

    PHP Code:
    function showForm($uname$error/*array or null*/){
      if (
    is_array($errors)){
        echo 
    '<P>The following errors occurred:<BR>';
        foreach(
    $errors as $err){
          echo 
    $err'<br>';
        }
      }
      echo 
    '<form action="..." method="post">';
      echo 
    '<input type="text" value="'.$uname.'" name="username">: Username';

  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Posts
    465
    Rep Power
    14
    If it's all about the interface you could also refresh a hidden frame which will query some page that will only contain enough code to either redirect the whole page or pop up a window.
    Words must be weighed, not counted.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Originally posted by kicken
    well, since you just want to check if they are there, it's a yes/no answer. You can do simple things like that with images using the onload/onerror event handlers or should be able to at least. I've done it before, but it was a different thing.

    I'm going to have to give this idea a try.... it just might work! Thanks!
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Originally posted by kicken
    well, since you just want to check if they are there, it's a yes/no answer. You can do simple things like that with images using the onload/onerror event handlers or should be able to at least. I've done it before, but it was a different thing.

    PHP Code:
    //response.php
    //blank.gif is a 1x1 transparent gif image.
    if (isset($_POST['n'])){
       
    header('HTTP/1.1 200 ok');
       
    header('Content-type: image/giff');
       
    readfile('blank.gif');
       exit;
    }

    $query="SELECT 1 FROM users WHERE username='{$_POST['u']}'";
    $res=mysql_query($query);
    if (
    mysql_num_rows($res)==1){
      
    header('HTTP/1.1 200 Ok');
      
    header('Content-type: image/gif');
      
    readfile('blank.gif');
    }
    else {
      
    header('HTTP/1.1 404 Not found');
      echo 
    'User doesn\'t exist';


    JS Code:
    Code:
    <img src="response.php?n=1" width="1" height="1" name="checkimg" onLoad="response(true);" onerror="response(false);">
    <script type="text/javascript">
    <!--
    function checkUsername(){
       document.checkimg.src='response.php?u='+escape(document.formName.fieldName.value);
    }
    
    function response(exists){
     if (!exists){
       alert('Username doesn\'t exist');
     }
     else {
        document.formName.submit();
     }
    }
    //-->
    </script>
    I've got this to work just fine as far as when a page loads, which I don't need, but where I'm stuck is getting it to check the username upon submit and just throw a pop-up if the user exists and stay on that page. If the user doesn't exist, move on with the database entry.

    I've tried adding a checkimg submit button but with no luck, it just goes right on through.

    <input name="checkimg" type="submit" id="checkimg" onClick="checkUsername()" value="Submit">

    I can't get that function to call other than the onload line which I don't want:
    <img src="response.php?n=1" width="1" height="1" name="checkimg" onLoad="response(true);" onerror="response(false);">



    Any ideas?
  18. #10
  19. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,944
    Rep Power
    4033
    Well, first, don't name the image and the button the same thing, javascript won't know which one you are talking about. Secondly, you'll need to switch the order around to have the script stay when the user exists. The way I setup it up was to stay if the user didn't exist.

    if (exists){
    alert('User already exists');
    }
    else {
    document.formName.submit();
    }
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Originally posted by kicken
    Well, first, don't name the image and the button the same thing, javascript won't know which one you are talking about. Secondly, you'll need to switch the order around to have the script stay when the user exists. The way I setup it up was to stay if the user didn't exist.

    if (exists){
    alert('User already exists');
    }
    else {
    document.formName.submit();
    }
    Hmmmm... it just seems to be ignoring the above if (exists) statement all together now. Even the onLoad no longer does anything, where it used to give a pop-up.

  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Here's where I'm at with this... I'm even forcing it to find an existing user onLoad just to make sure it's working:

    PHP Code:
    <img src="users_response.php?u=james" width="1" height="1" name="checkimg" onLoad="response(true);" onerror="response(false);">

    <
    script type="text/javascript">
    <!--
    function 
    checkUsername() {
       
    document.checkimg.src='users_response.php?u='+escape(document.form1.username.value);
       
    //document.checkimg.src='users_response.php?u=james';
       //alert('testing 123');
    }

    function 
    response(exists) {
    if (
    exists){
    alert('User already exists');
    }
    else {
    document.form1.submit();


    But if I use the older if exists code, I get the right pop-ups but it continues to process the form, here's the "working" code:

    PHP Code:
    if (!exists){
    //alert('Username does not exist');
    document.form1.submit();
    }
    else {
    alert('Username does exist!!');
     }


    Here's my submit button:
    <input name="submit" type="submit" id="submit" onClick="checkUsername();response(true)" value="Submit">


    I'm stuck.
    Last edited by james555; December 5th, 2002 at 09:26 AM.
  24. #13
  25. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,944
    Rep Power
    4033
    You need to return false to cancel a submit. So you'd do something like this:
    Code:
    function checkUsername() {
    document.checkimg.src='users_response.php?u='+escape(document.form1.username.value);
    //document.checkimg.src='users_response.php?u=james';
    //alert('testing 123');
    }
    
    
    
    function response(exists) {
    if (exists){
    alert('User already exists');
    }
    else {
    document.form1.submit();
    }
    
    
    <form action="..." onsubmit="return checkUsername();return false;"
    <input type="submit" value="Submit">
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Wow, I finally got it to work doing this:

    PHP Code:
    <img src="users_response.php?n=1" width="1" height="1" name="checkimg" onLoad="response(true);" onerror="response(false);">
    <
    script type="text/javascript">
    <!--
    function 
    checkUsername(){
       
    document.checkimg.src='users_response.php?u='+escape(document.form1.username.value);
    }

    function 
    response(exists){
     if (!
    exists&&document.form1.username.value != "") {
         
    document.form1.submit();
     }
     else if (
    document.form1.username.value != "") {
        
    alert('That username already exists.\nPlease choose another.');
     }
    }
    //-->
    </script> 

    Had to get rid of the pop-up onLoad so I check to see if the username field is filled in yet.

    My submit button is still and I didn't have to add the onSubmit to the form action area:
    <input name="Submit" type="submit" value="Submit" onClick="checkUsername();return false" >
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2002
    Posts
    292
    Rep Power
    0
    Found a problem, I use the same form for adding or updating users, so when I add a user, the form is blank and there are no problems.

    When I edit/update a user, the form starts out pre-populated... thus kicking off the OnLoad alert window that the username exists.

    Is there a way to still load the image/script without the onLoad or can I add something to my if statement to make sure the submit button was pushed before showing an alert?

    I was thinking something like:

    PHP Code:

     
    else if (document.form1.username.value != "" && submit == "submit") {
        
    alert('That username already exists.\nPlease choose another.'); 
    Is that possible to check if the submit was clicked as well as the username field being populated -- before showing any alerts?
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo