How to check unique username before form submission

Question

I have been trying this for hours now. I want to check if the username already exist in DB or not. If it does, alert and don't submit. If it doesn't, submit. Here is my code.

$(function() {
$("#new_user").on("submit", function() {
    var anyFieldIsEmpty = $('.newuser_input').filter(function() {
        return $.trim(this.value).length == 0;
    }).length > 0;
    if (anyFieldIsEmpty) {
        alert("There are empty fields!");
        return false;
    }
    else {
        check_curr_username();
        return false;
    }
});
});


function check_curr_username() {
var username = $("#user_username").val();
$.ajax({
    "url": "/checkusername",
    "data": {"name":username},
    "type": "get",
    "dataType": "json",
    "success": function(data) {
        alert('Username'+' '+data.username +' '+'is already taken' );
        $("#user_username").focus();
        return false;
    },
    "error": function() {
        $("#new_user").submit();
        return true;
    }
});
}

This is a Rails form. The code is only working when the username already exist. But if not then the form is not submitting.

Answer 1

we need the checkusername page but i think that the form isn't submitted because error isn't triggered (ie: no error happened). checkusername page should return a specfic value if the username is not already used then you can process the form.

Answer 2

This is how I check for unique username. I may get down-voted because it's not Rails, but PHP.

    <style>.nodisplay{display: none;}</style>

    <form id="usersigningup" name="usersigningup" method="post" action="">
    <input type='text' name='name' id='nose' pattern='[A-Za-z0-9_]{5,20}' required>
    <input type='text' name='password' id='password' pattern='[A-Za-z0-9_]{5,20}' required>
    <input class="nodisplay" type="submit" id="usersignup" name="usersignup" value="Go!"></form><br>
    <span id='response'></span>

In my CSS the default display for the submit button is set to none. next I use a javascript keyup function to collect the input field of id='nose' (which is the username) and send an ajax post to php which then runs a query on my database.

     $(document).ready(function(){
     $('#nose').keyup(function(){
     var name = $('#nose').val();
     $.ajax({
     type: 'post',
     data: {ajax: 1,name: name},
     success: function(response){
     $('#response').html(response);
     }});});});

Next I use a mysqli query.

    <?php include ('connect.php'); if( isset($_POST['ajax']) && isset($_POST['name']) ){
    $un = $_POST['name'];
    $sql51 = mysqli_query($conn, "SELECT username FROM mysite Where username = '$un'");
    if (mysqli_num_rows($sql51) > 0) {
    echo "<font color='red'>Sorry <b><i>" . $un . "</i></b> has been taken</font><script>document.getElementById('usersignup').style.display='none';</script>";
    } else {
    echo "<font color='green'><b>The Username <i>" . $un . "</i> is available</b></font><script>document.getElementById('usersignup').style.display='block';</script>";}
    exit;}?>

Notice the 'if' statement in the query; this will either run one of two scripts. The first will be to keep the display of the submit button as none if there is an exact match and echo 'Sorry (username) has been taken' in an html element with the id='response'. The second script will echo 'The username (username) is available' and set the display of the submit button style to 'display:block'; making it clickable.

As I said this all happens on a keyup event so the query runs everytime you press a key and let it up you will see the characters you type in the response element; along with seeing the submit button or not.

The PHP in this example is meant as an example and not to be considered safe from hackers; although, there is a pattern attribute set in the form disallowing most characters. I hope this helps.