PHP form submission and AJAX validation

Question

EDIT: document.getElementById('submit').disabled='disabled'; does the trick if I put it instead of return false; but for some reasons, it also disables the button when the username is NOT taken.

---

Below is basic script to check a username availability.

How can I prevent the form from being submitted if a username is already taken?

Ideally i would like to have a JS alert box pop up.

I've tried to add this to the JS but didn't work:

document.getElementById('submit').disabled

Also I've tried to add onclick="return validate();" to the form itself, but no luck either: the form still can still get submitted.

HTML

<form id="edit" action="edit.php" method="post">
   <fieldset>       
     <label>Username</label><input type="text" class="input" name="username"      
     id="username"/><span id="status"></span> 
    <button type="submit" id="submit" value="add">Save</button>
   </fielset>
</form>

Script

<script type="text/javascript">
$(document).ready(function() {
    $("#username").change(function() {
        var username = $("#username").val();
        var msgbox = $("#status");

        if (username.length >= 4) {
            $("#status").html('<img src="images/gif/ajax-loading.gif">');

            $.ajax({
                type: "POST",
                url: "ajax_check.php",
                data: "username=" + username,
                success: function(msg) {

                    if (msg == 'OK') {

                         msgbox.html('<img src="/images/yes.png">');
                         return true;

                    } else {
                        msgbox.html(msg);            
                        return false;

                    }
                }
            });
        } else {

            $("#status").html('<img src="/images/no.png">too long!');
            return false;
        }
        return false;
    });
});

edit.php and ajax_check.php only contain some SQL queries.

Also, some users have JavaScript disabled on their browser, how could I get around this?

Answer 1

This should do the trick. Re-enable the button on success and disable it on failure.

   if (msg == 'OK') {                       
            msgbox.html('<img src="/images/yes.png">');
            document.getElementById('submit').disabled = false;  //enable submit

      } else {                    
            msgbox.html(msg);            
            document.getElementById('submit').disabled = 'disabled';  //disable submit
      }

Answer 2

You can add to the attribute to the form element

onsubmit="return validate();"

If JavaScript is disabled then there is nothing you can do about it. This is why it is imperative that you apply data validation/santiation on the server-side.