jQuery form validation issues..

[rockinaway]

Basically, I have a signup form and I want it to be validate when the form is submitted via jQuery and an AJAX request. At the moment, I have a <form action"test.php"> tag which seems to mean that even though I have a request to validate the form on submit, the page automatically goes to test.php. Is there any way to stop this and only continue to this page when the validations return true?

 

If not, can I just remove the <form></form> tags and leave it like that and just use inputs etc?

[rockinaway]

any ideas?

[Adam]

You need to return false from your handler to prevent the default action, or true/null to carry on.

 

Edit

 

Although how are you binding the event?

[AyKay47]

the way I do things like this is like you said in the second part of your question. I normally don't include the form tags, and let Jquery AJAX API handle the input.. I use an input type=button as well, not submit..however returning false as Adam said is a viable solution as well.

[rockinaway]

Right, I've been able to snip the code down. The false thing just doesn't seem to work :s and I need the form tags for recaptcha.

 

My HTML (with some PHP in) is:

 

<form method="post" id="signup_form" action="register.php">
  <tr>
<td>
<label for="fname">'.$lang['first_name'].':</label>
</td>
<td colspan="3"> 
<input type="text" name="fname" id="fname" class="input_field_reg" maxlength="15" />
<input type="hidden" id="submitted" />
</td>
  </tr>
  
   <tr>
<td>
<label for="lname">'.$lang['last_name'].':</label>
</td>
<td colspan="3"> 
<input type="text" name="lname" id="lname" class="input_field_reg" maxlength="15" />
</td>
  </tr>
  
  <tr>
<td>
<label for="password1">'.$lang['password'].':</label>
</td>
<td colspan="3">
<input type="password" name="password1" class="input_field_reg" id="password1"/>
</td>
  </tr>
  
  <tr>
<td>
<label for="email1">'.$lang['email'].':</label>
</td>
<td colspan="3"> 
<input type="text" name="email1" id="email1" class="input_field_reg" />
</td>
  </tr>
  
  <tr>
<td>
<label for="email2">'.$lang['confirm_email'].':</label>
</td>
<td colspan="3"> 
<input type="text" name="email2" id="email2" class="input_field_reg" />
</td>
  </tr>

  
  <tr>
   <td>
   <div id="reg_error"></div>
   </td>
  </tr>

  <tr>
<td colspan="4" style="text-align:center;">
<input type="submit" class="reg_button" value="'.$lang['signup'].'" id="signup"/>
</td>
  </tr>
</form>

 

And the jQuery I am using is:

 

var error_message = $('#reg_error');

// When the submit button is clicked, let's go!
$('#signup').click(function () {
// Store the values
var fname = encodeURIComponent($('#fname').val()); 
var lname = encodeURIComponent($('#lname').val()); 
var pass1 = encodeURIComponent($('#password1').val()); 
var email1 = encodeURIComponent($('#email1').val());

// Show the loader
error_message.html('<img src="theme/img/loader.gif" height="16" width="16" />');

// Send the request
$.ajax({
   url: 'register.php',
   data: 'fname='+fname+'&lname='+lname+'&pass1='+pass1+'&email1='+email1,
   type: 'post',
   success: function (j) {
error_message.html(j);
   }
});
}); 

 

Any ideas?

[Adam]

the way I do things like this is like you said in the second part of your question. I normally don't include the form tags, and let Jquery AJAX API handle the input.. I use an input type=button as well, not submit..however returning false as Adam said is a viable solution as well.

 

If you don't include the <form> tags you have invalid mark-up and no support for users with JS disabled (think mobile browsers). You also loose the ability to access the form object through document.formName / document.forms['formName'], as it doesn't exist, which means every field has to be accessed individually. Subsequently that means there's no generic handling of forms available, like passing the serialize() / serialiseArray() methods a form object, which kind of invalidates your point about using the jQuery AJAX API.

 

@rockinaway

 

Do not exclude the form tags, they are essential. In response to your latest post, I can't see you using the return statement anywhere in your jQuery?

[AyKay47]

you have a point with mobile browsers, overlooked that detail..

[rockinaway]

 

@rockinaway

 

Do not exclude the form tags, they are essential. In response to your latest post, I can't see you using the return statement anywhere in your jQuery?

 

I have tried the return bit here:

 

// Send the request
$.ajax({
   url: 'register.php',
   data: 'fname='+fname+'&lname='+lname+'&pass1='+pass1+'&email1='+email1,
   type: 'post',
   success: function (j) {
error_message.html(j);
return false;
   }
});

 

However, the page still goes to register.php following the action of the form. This seems to do nothing :/

[Adam]

That's because you're within an additional function there:

 

success: function (j) {

error_message.html(j);

return false;

  }

 

You're only returning from that.

[rockinaway]

So what do I do?.. because I need to send that request to validate through the PHP file. Do I think analyse the response from that function? :S .. any examples please?

[AyKay47]

the parent function needs to return false, not your ajax child function

[rockinaway]

So how can I take the result from the ajax function and make it return true/false in the parent function? Can I just store the result from the ajax function (say a number) in a variable and just reuse that in the parent function to check?

[Adam]

You can store the AJAX object within a variable, and determine what to return based on the status:

 

var request = $.ajax({
    [...]
});

return (request.status != 'success');

[Adam]

Or in a more obvious syntax:

 

if (request.status == 'success') {
    return false;
}

[Adam]

After testing this it seems I made a few mistakes in my last posts. The status property returns a numeric value, 200 on success, and the statusText property returns "success". You also need to set the 'async' option to false, otherwise the return statement will be called before the request has finished.

 

So the code would be:

 

var request = $.ajax({
    async: false,
    //...
});

return (request.status != 200);

[rockinaway]

That works. Just a note for anyone else, I also asked the same question at the jquery support forum and an alternative method was given that also worked: https://forum.jquery.com/topic/issues-with-validation-before-form-submit

 

Thanks a lot!

 

Another question leading from this. I want it so that when the user presses sign up, if it's successful, in the same box the form is replaced with a new form and a new submit button. Then once this new submit button is pressed, then all the data from BOTH forms is used in the PHP file.

 

Would it be a matter of just always making the first submit button return false and then upon success of the ajax request a replacement of the HTML to be done. And then the second submit button ACTUALLY submits the form?

 

Can I hide the initial form when required, and then still access the data that was entered into it?