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
0
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?
0
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Download your Guide
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.
0
Ray PaseurCommented:
That sounds like exactly the right solution!
0
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

0

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.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.