How to disable form submit if the username is not available

Question

I have checked the user name availability. The problem is, even if the username is not available, the form is posting.

Edited Code:

<SCRIPT type="text/javascript">
$(document).ready(function(){

$("#emailch").change(function() { 

    var usr = $("#emailch").val();
    if(usr.length >= 3)
    {
        $("#status").html('<img src="images/loader.gif" align="absmiddle">&nbsp;Checking availability...');
        $.ajax({  
            type: "POST",  
            url: "includes/check.php",  
            data: "username="+ usr,  
            success: function(msg){   
                $("#status").ajaxComplete(function(event, request, settings){ 
                    if(msg == 'OK')
                    { 
                        $("#username").removeClass('object_error'); // if necessary
                        $("#username").addClass("object_ok");
                        $(this).html('&nbsp;<img src="images/tick.gif" align="absmiddle">');

                    }
                    else
                    {
                        $("#username").removeClass('object_ok'); // if necessary
                        $("#username").addClass("object_error");
                        $(this).html(msg);


                    }

                });

            }
        }); 
    }

    else
    {
        $("#status").html('<font color="red">The username should have at least <strong>3</strong> characters.</font>');
        $("#username").removeClass('object_ok'); // if necessary
        $("#username").addClass("object_error");
    }

});

});
</SCRIPT>

What I want is that, the form should not be posted if the user name is not available. I have tried by using return false; in IF CONDITION but it fails. Please suggest any alternate method. Any help will be appreciated.

Answer 1

Set a flag (variable) in your success function to false (for instance) if the username is not available. Then check that flag in your form's onsubmit handler, and if the flag equals false, return false from that event handler, and your form will not submit.

Answer 2

on submit return false no matter what, if the field is good do your ajax send of the form, if its bad, error out or whatever you need

<form action="http://www.google.com" id="formId" method="post">
<input type="text" id="emailch" name="emailch" />
<input type="submit" />
</form>


<script type="text/javascript">

$(document).ready(function(){

    $("#formId").submit( function() { 

        if( $("#emailch").val().length >= 3){
            alert( 'the form is going to post via ajax here' );
        }else{
            alert( 'user name invalid error out or whatever you need to do.' );
        }
        return false;
    });
});
</script>

Answer 3

Using return false to stop a form from being submitted doesn't really work that well in jQuery. Use event.preventDefault() instead, try something like this:

$(function() {
    $('#formid').submit(function(event) {
        if ($("#emailch").val().length < 3) {
            event.preventDefault();
        }
    });
});