Link to home
Start Free TrialLog in
Avatar of Nathan Riley
Nathan RileyFlag 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

Avatar of Raymond van den Bedum
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
Avatar of 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?
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?
SOLUTION
Avatar of Nathan Riley
Nathan Riley
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That sounds like exactly the right solution!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I went with my solution primary.