Question

i just pluged a JQuery username check which worked fine , the problem is that my form still submitting even the username exist on my Mysq Database, how can i configure it to deny submitting to my server side .php file if it exists ?

here is my Jquery plugin javascript code

  $(document).ready(function() {


        //the min chars for checkusername
        var min_chars = 3;

        //result texts
        var characters_error = 'Minimum amount of chars is 3';
        var checking_html = '<img src="images/checkusername.gif" /> Checking...';

        //when button is clicked
        $('#check_checkusername_availability').click(function(){
            //run the character number check
            if($('#checkusername').val().length < min_chars){
                //if it's bellow the minimum show characters_error text
                $('#checkusername_availability_result').html(characters_error);
            }else{          
                //else show the cheking_text and run the function to check
                $('#checkusername_availability_result').html(checking_html);
                check_availability();
            }
        });


  });

//function to check checkusername availability  
function check_availability(){

        //get the checkusername
        var checkusername = $('#checkusername').val();

        //use ajax to run the check
        $.post("frontend/functions/f_checkuser.php", { checkusername: checkusername },
            function(result){       
                //if the result is 1
                if(result == 1){
                    //show that the checkusername is available
                    $('#checkusername_availability_result').html('<span class="is_available"><b>' +checkusername + '</b> is Available</span>');
                }else{
                    //show that the checkusername is NOT available
                    $('#checkusername_availability_result').html('<span class="is_not_available"><b>' +checkusername + '</b> is not Available</span>');
                }
        });

} 

here is my html field

 <table border="0" >
          <tr>
            <td valign="middle"><input class="input_field_12em required userUserName" name="userUserName" id="checkusername"></td>
            <td valign="middle"><input type='button' id='check_checkusername_availability' value='Check Availability'></td>
            <td><div id='checkusername_availability_result'></div></td>
          </tr>
        </table>

Answer 1

You can wait for the callback to fire for your AJAX request, then you can either submit the form or not:

$(function () {
    $('form').on('submit', function (event, extra) {
        if (typeof extra == 'undefined') {
            extra = false;
        }
        //if no extra argument is passed via `.trigger()` then don't submit the form
        return extra;
    });
    $('#check_checkusername_availability').on('click', function () {
        $.ajax({
            url : 'frontend/functions/f_checkuser.php',
            type : 'post',
            data : { checkusername : $('#checkusername').val() },
            success : function (serverResponse) {
                //now check the serverResponse variable to see if the name exists, if not then run this code:
                $('form').trigger('submit', true);
            },
            error   : function (jqXHR, textStatus, errorThrown) { /*don't forget to handle possible errors*/ }
        });
    });
});

Otherwise, you can force the AJAX request to be synchronous by setting async:false, but this will lock-up the browser until the AJAX request resolves, which could be seconds where the user can’t do anything. This gives the impression that your script is broken to the user.