Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
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
jQuery
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>
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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;
Always check your inputed data again at the server
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;
}
});
Always check your inputed data again at the server
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?
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.
Simply use a variable to check whether the username is already taken or not.
Set this variable true default means username is taken
and when
Here make i little modification:
And when you submitting form check for the value of this variable as follows
Set this variable true default means username is taken
var userNameTaken = true;
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
});
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");
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;
}
});
Premium Content
You need an Expert Office subscription to comment.Start Free Trial