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

PHPjQueryHTML

Last Comment

Nathan Riley

8/22/2022 - Mon

Raymond van den Bedum

6/12/2015

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 Riley

6/12/2015

ASKER

Not sure how I follow, how does your code know that the username is taken and to not allow the submit to happen?

Ray Paseur

6/12/2015

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?

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

SOLUTION

Nathan Riley

6/12/2015

Become an EE member today7-DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

Not exactly the question you had in mind?

Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.

ask a question

Ray Paseur

6/12/2015

That sounds like exactly the right solution!

ASKER CERTIFIED SOLUTION

Get an unlimited membership to EE for less than $4 a week.

Unlimited question asking, solutions, articles and more.

Nathan Riley

6/19/2015

ASKER

I went with my solution primary.