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?

I think onclick="return validate();" should do the trick. Where you placed that? it should be in the button element. There is no way to force JS execution, actually the page can be accessed with some download utilities (wget for instance) that don't have any idea what JS is. :) — Antoan Milkov
– Antoan Milkov, Commented Sep 15, 2013 at 4:17
@AntoanMilkov I just did as you said and yet, the submit button is still clickable, therefore the form gets submitted. I really need to make sure that no customers can have the same usermame. — Caro_deb
– Caro_deb, Commented Sep 15, 2013 at 4:20
Shouldn't it be on the form onsubmit event? Like <form onsubmit="return validate();">. — George Marques
– George Marques, Commented Sep 15, 2013 at 4:22
Change it to:document.getElementById('submit').disabled='disabled' as see what happens — user2417483
– user2417483, Commented Sep 15, 2013 at 4:22

Konsole · Accepted Answer · 2013-09-15 04:44:18Z

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
      }

answered Sep 15, 2013 at 4:44

Konsole

3,4753 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caro_deb Over a year ago

Thanks ! It works now !! Also what should I do for users with Javascript disabled. Is there any way to get around this and also use some PHP to disable the button ?

Konsole Over a year ago

You should not rely only on client side validation. Use proper server side validation too. Client side validation is just for better user experience. Anyone can bypass these validations. You can check if the user is registered or not after form submission and display proper message accordingly.

user2417483 · Accepted Answer · 2013-09-15 04:21:46Z

1

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.

answered Sep 15, 2013 at 4:21

user2417483

2 Comments

Caro_deb Over a year ago

thanks but the form can still be submitted. Just to be clear, onsubmit="return validate();" should be places within the submit button, right ?

user2417483 Over a year ago

@BenRifff, no it can be placed in either location, just a different syntax.

Collectives™ on Stack Overflow

PHP form submission and AJAX validation

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related