Username Availability Check - Stop Submit if Taken

Nathan Riley
Nathan Riley used Ask the Experts™
on
I have a check in place that queries the DB to check if a username is taken.  My problem is that now I need validation on my form field that if taken don't allow the submit, but unsure on how to accomplish.

Here is my code as of now.

HTML
<form class="col-md-12" action="submit.php" method="post">
                        <div class="form-group">
                            <label>Username</label><span id="userResult"></span>
                            <input id="username" class="form-control" type="text" name="username" placeholder="Username" required/>
                        </div>

                        <div class="form-group">
                            <label>First Name</label>
                            <input class="form-control" type="text" name="firstName" placeholder="First Name" required/>
                        </div>

                        <div class="form-group">
                            <label>Last Name</label>
                            <input class="form-control" type="text" name="lastName" placeholder="Last Name" required/>
                        </div>

                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" name="email" placeholder="Email" required/>
                        </div>

                        <input type="hidden" name="submitType" value="6"/>
                        <input type="hidden" name="userID" value="<?php echo $userID;?>"/>
                        <input type="hidden" name="orgID" value="<?php echo $orgID;?>"/>

                        <button class="btn loginBTN">INVITE</button>
                    </form>

Open in new window


jQuery
<script>
    $("#username").keyup(function (e) { //user types username on inputfiled
        var username = $(this).val(); //get the string typed by user
        $.post('checkUsername.php', {'username':username}, function(data) { //make ajax call to check_username.php
            $("#userResult").html(data); //dump the data received from PHP page
        });
    });
</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

If you wan't the form stopping from submitting you can give it a try with .submit() event. When the form validation failed stop the default event en return false;

$('form').submit(function(){
    if(!valid){
        event.preventDefault();
        return false;
    }

});

Open in new window


Always check your inputed data again  at the server
Nathan RileyFounder

Author

Commented:
Not sure how I follow, how does your code know that the username is taken and to not allow the submit to happen?
Most Valuable Expert 2011
Top Expert 2016

Commented:
The strategy here is to make an AJAX request to the server when the username field loses focus.  The server can return a JSON string with a response value, and your JavaScript can take the appropriate action.  This is what the checkUsername.php should do.  It looks like you have many of the pieces in the right place, so what part do you still want help with?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Nathan RileyFounder
Commented:
I wanted to make it so that if the username is taken it not allow the user to submit.  I ended up coming up with a solution where I disable the submit button based on the response from the username check if taken, then removing disabled attribute if not taken.
Most Valuable Expert 2011
Top Expert 2016

Commented:
That sounds like exactly the right solution!
Full Stack Developer
Commented:
Simply use a variable to check whether the username is already taken or not.
Set this variable true default means username is taken

var userNameTaken = true;

Open in new window


 and when
$.post('checkUsername.php', {'username':username}, function(data) { //make ajax call to check_username.php
  $("#userResult").html(data); //dump the data received from PHP page
});

Open in new window


Here make i little modification:

$.post('checkUsername.php', {'username':username}, function(data) { //make ajax call to check_username.php
  $("#userResult").html(data.content); //dump the data received from PHP page
  userNameTaken = data.isTaken;
}, "json");

Open in new window


And when you submitting form check for the value of this variable as follows
$('form').on("submit", function(event){
    if(userNameTaken){
        /* User name is taken */
        event.preventDefault();
        return false;
    }else{
      /* User name is available */
      /* Submit form you want */
      return true;
    }
});

Open in new window

Nathan RileyFounder

Author

Commented:
I went with my solution primary.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial