Ajax POSTs data inspite of false Twitter bootstrap form validation - php

Question

I am trying to submit a form and send the data to my php function with Ajax. The problem is that, When I send data without ajax call and just using form action, My form validation works, but when I want to use Ajax, Form will be submitted without being validated. Here is my code:
html:
<form novalidate="" class="form-horizontal">
<div class="control-group">
<label for="email" class="control-label">Email address</label>
<div class="controls">
<input type="email" required="" id="email" name="email">
<p class="help-block">Email address we can contact you on</p>
</div>
</div>
<div class="control-group">
<label for="emailAgain" class="control-label">Email again</label>
<div class="controls">
<input type="email" name="emailAgain" id="emailAgain" data-validation-matches-message="Must match email address entered above" data-validation-matches-match="email">
<p class="help-block">And again, to check for speeling miskates</p>
</div>
</div>
<button id="button" class="button" type="submit" name="submit">Check your
</form>
Ajax:
$(document).ready(function () {
$(function () {
$("#button").click(function () {
$('.error').hide();
// Process form
var email = $("input#email").val();
var emailagain= $("input#emailagain").val();
var dataString = 'email=' + email + '&emailagain=' + emailagain;
$.ajax({
type: "POST",
url: "send_email.php",
data: dataString,
success: function (data) {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("Thank you ")
});
}
});
return false;
});
});
});
I also tried submitHandler: function(form){} with Ajax call, but in that case, my success function in Ajax call won't work and it seems that the data will be sent through GET method instead of POST! weird!!! Thanks in advanced!

Answer 1

Ok you have a submit button and on clicking this you are doing some ajax, so you need to use event.preventDefault()
Here how the code should be and it should work, also check for any syntax error in your code. Below is the code I just tested and worked on my linux box.
<script>
$(document).ready(function () {
$(function () {
$("#button").click(function (x) {
x.preventDefault(); // lets stop the default behaviour which is submit
$('.error').hide();
// Process form
var email = $("input#email").val();
var emailagain= $("input#emailagain").val();
var dataString = 'email=' + email + '&emailagain=' + emailagain;
$.ajax({
type: "POST",
url: "send_email.php",
data: dataString,
success: function (data) {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("Thank you ");
}
});
});
return false;
});
});
</script>