jQuery Validation plugin results in empty AJAX POST

Question

Hi, I have tried to solve this issue for at couple of days with no luck. I have a form, where I use the validation plugin, and when I try to submit it, it submits empty vars. Now, if I remove the validation, everything works fine. Here is my implementation:

$(document).ready(function(){

 $("#myForm").validate({
  rules: {
    field1: {
      required: true,
      minlength: 5
    },
    field2: {
      required: true,
      minlength: 10
    }
  },
  messages: {
    field1: "this is required",
    field2: "this is required",
  },
  errorLabelContainer: $("#validate_msg"),
  invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        $("#validate_div").show();
    }
  },
  onkeyup: false,
  success: false,
  submitHandler: function(form) { doAjaxPost(form); }
 });
});

function doAjaxPost(form) {
  // do some stuff
  $(form).ajaxSubmit();
  return false;
}

As I wrote this does not work when I have my validation, BUT if I remove that, and just add an

onsubmit="doAjaxPost(this.form); return false";

to my HTML form, it works - any clue???

Answer 1

Why do you even need doAjaxPost? And I guess the return false might be the culprit. Do you really need that?

Can't you just do

...
submitHandler: function(form) {
    //do some stuff
    $(form).ajaxSubmit();
}
...

Answer 2

I have now tried it, same result - hte reason for a separate function (doAjaxPost), is because I used it for several forms, therefore a separate function.

submitHandler: function(form) {
  // do some stuff
  alert("submit");
  $(form).ajaxSubmit();
}

And, it doesn't work neither in Safari or Firefox. Does it have any influence on the order of javascript includes? I have these at the moment:

 <script type="text/javascript" src="/js/jquery.js"></script>
 <script type="text/javascript" src="/js/jquery.php.js"></script>
 <script type="text/javascript" src="/js/jquery.form.js"></script>
 <script type="text/javascript" src="/js/jquery.validate.min.js"></script>

?

Answer 3

I soved the issue, the problems was the url i sued for post. Instead of using a full URL:

var url = "https://" + document.domain + "/ajax.php";

I just use:

var url = "/ajax.php";

and everything works as it should.

---

When using php with cookies, the session ID will automatically be sent in the request headers even for Ajax XMLHttpRequests. If you use or allow URL-based php sessions, you'll have to add the session id to every Ajax request url, OR use a relative URL path (like above solution).

<script language="javascript" type="text/javascript">
//<![CDATA[
  var url = 'https://'+document.domain+'/ajax.php?&lt;?=session_name(); ?>=<?=session_id(); ?>';
//]]>
</script>

Which works as well.