check if username exists on form submit

Question

This is my code.

.js

$(document).ready(function() {

    $("#username").focusout(function() {

        $.ajax({
            type:'post',
            url:site_url()+'/client/checkUserName',
            data:{'username':$("#username").val()},
            dataType:'json',
            success:function(result){
                if(result != 'false'){
                  $('#message').text('Username exists');  
                }

            }
        });  
    });

.html

<form id='form1'  method="post">
        <input type="text" name="username" id="username"/>
        <span id="message" style="color:red"></span>
        <input type="submit" value="submit" id="regis" class="btn"/>
</form>

Its working fine on focusout. How to make the form to not submit if username exists?

Suppose there is a hidden field in the form say

   <input type="text" hidden id="type" value="<?php echo $type;?>">

Then if value exists in the hidden field then the username neednot be checked if already exists or not.

Answer 1

If you only check that the username exists in javascript, your site won't be secure. A hacker doesn't need to actually click the button or execute your client-side code to get a submit to take place.

So that means you need to check for username existance on the server-side when the submit has already happened. With that being the case, there isn't much to gain from the javascript check.

You also don't want to provide hackers with a way to check which usernames exist and which do not. If you check after submit, a hacker doesn't know if the username was invalid, or if the password was wrong.

EDIT: So far @КонстантинРекунов has offered the only javascript that might work. However, see my comments under his answer regarding the fragile nature of the solution. Any solution like this will be inherently fragile.

The only reasonable reason for doing something like this is to suggest alternatives during a signup process. Even then in is bad practice. I recommend you alter your intended design.

Answer 2

You can simply disable submit button

$(document).ready(function() {

$("#username").focusout(function() {

    $.ajax({
        type:'post',
        url:site_url()+'/client/checkUserName',
        data:{'username':$("#username").val()},
        dataType:'json',
        success:function(result){
            if(result != 'false'){
              $('#message').text('Username exists');
              $('#regis').attr('disabled','disabled');
            } else {
              $('#regis').removeAttr('disabled');
            }
        }
    });  
});

Answer 3

you might need to put your js code in a function and add: return false; to the if the check fails then add onsubmit = "[functionName]"; .

Answer 4

you should add return false like and also where you call the function

 if(result != 'false'){
                  $('#message').text('Username exists'); 
                   return true; 
                    }
                    else
                    {
                      return false;
                    }