Username Availability Check - Stop Submit if Taken

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

LVL 12
Nathan RileyFounderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Raymond van den BedumCommented:
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 RileyFounderAuthor Commented:
Not sure how I follow, how does your code know that the username is taken and to not allow the submit to happen?
Ray PaseurCommented:
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?
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Download eBook
Nathan RileyFounderAuthor 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.
Ray PaseurCommented:
That sounds like exactly the right solution!
Mukesh YadavFull Stack DeveloperCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Nathan RileyFounderAuthor Commented:
I went with my solution primary.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.