Avatar of Nathan Riley
Nathan Riley
Flag for United States of America asked on

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

Avatar of undefined
Last Comment
Nathan Riley

8/22/2022 - Mon
Raymond van den Bedum

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

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

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
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

That sounds like exactly the right solution!
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Nathan Riley

ASKER
I went with my solution primary.