form submit always return true while it should return false

Question

I'm validating a form before submitting using this code

<form method="post" onsubmit="return reg()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="username" id="username" autocomplete="off" ></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" autocomplete="off" ></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="email" id="email" autocomplete="off"></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="phone" id="phone" autocomplete="off" placeholder="001**********"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="register" id="register" value="register"></td>
</tr>
</table>
</form>

and this js code

function reg(){
    var user = $("#username").val(),
        pass = $("#password").val(),
        city = $("#city").val(),
        email = $("#email").val(),
        phone = $("#phone").val();

    if(user.length<4){
        alert('short name');
        return false;
    }
    else if(pass.length<6) {
        alert('password error');
        return false;
    }
    else if(city.length<3) {
        alert('city error');
        return false;
    }
    else if(phone.length<6) {
        alert('phone error');
        return false;
    }
    else{
        $.post('ajax/checkex.php?user='+user+"&email="+email).done(function (data) {
            if(data.indexOf('user') !== -1){
                alert('user name is not available');
                return false;
            }
            else if(data.indexOf('email') !== -1){
                alert('email address is already registered');
                return false;
            }
            else if(data.indexOf('available') !== -1){
                return true;
            }
        });
      //return false;
    }
}

But the form always submits and the ajax code does not work at all. It does not even alert anything inside like alert(data).

The js code returns true even though the name and the email are already registered before.

When I uncomment the last return false line it returns false and the ajax works fine but sure the form does not submit at all. So where's the error in this code?

ajax is asynchronous and even if it wasn't returning boolean from inside a callback won't return anyhting to `reg()`. Suggest you read up on remote ajax validation — charlietfl, Jan 17 '15 at 17:31
The issue seems to be with the Asynchronous nature of Ajax. The .done function is called after returning. — Sid, Jan 17 '15 at 17:31
The return is inside .done and if there's no return false after it, it won't work so how to check if user or email are not registered and return false or true using Ajax — PHP User, Jan 17 '15 at 17:35

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

That will always post the form. If you want to submit the form with jquery, you can use the submit event.

You can use the event.preventDefault method to prevent a form from submitting.

A simple example

$("myForm").submit(function(ev){
   ev.preventDefault();
   //Check if the inputs are valid
   if( formvalid ){
      $.ajax() //Make your ajax call 
   }
})

Also see : Submit a form using jQuery

Edit : This shouldn't submit if your ajax call returns false

$("myForm").submit(function(ev){
  $.ajax({
    url: "url",
    type: "post",
    async: false, //To make the ajax call synchronous
    success: function(valid){
      if(!valid)
        ev.preventDefault();
    }
  }); 
})

edited May 23 '17 at 12:20

Community

1
1

answered Jan 17 '15 at 17:38

Ozan

3,709
2
18
23

$("#regForm").submit(function (e) { e.preventDefault(); validation here ajaxe here if ajax returns true: $("#regForm").submit(); the ajax works but the form does not submit because the default action has been prevented – PHP User Jan 17 '15 at 17:44
Isn't your purpose to prevent the form from submitting and submit the data via an ajax call? That is what I understood. If you want to use the ajax call just for validation you can make a synchronous ajax call and call ev.preventDefault only when it returns false. – Ozan Jan 17 '15 at 17:54
The purpose is checking availability of user name and email address then submit the form normally – PHP User Jan 17 '15 at 17:59
Try the edit in that case. I have not ran a test with it but it should work seeing that your main problem previously was the asynchronous nature of the ajax call, making it synchronous should solve it. However, this is not an elegant solution I would recommend. There are much better ways to validate a form. – Ozan Jan 17 '15 at 18:05

form submit always return true while it should return false

1 Answers1