Question

I am using AJAX/jQuery for the first time and am slowly getting my head around it.

I have form validation that works and also a confirm button when the submit is pressed. The problem is the confirm will fire even if the form hasn’t finished being validated.

My question is where do I put the confirm code?

I have (shortened for brevity) the validation

rules: {
    supplier: {
      required: true,
    },
    product: {
      required: true,
    }
  },
messages: {
  supplier: {
    required: "Please enter the supplier's name"
  },
  product: {
    required: "Please enter the name of the product"
  }
},

submitHandler: function(form){
    postForm();
}

Now that works great

Then I had this in another script

$('#product').click(function() {
    if(confirm("Are you sure that the details are correct?")){
        return true;
    }else{
         return false;
    }
 });

This works too but fires before the validation is complete – I have tried slotting it inside the submitHandler, and the submit handler within it and a couple of different places but I know that i am obviously missing something -any suggestions appreciated
(I am using the following plugins – validate.min confirm and format)

Answer 1

Try inside submitHandler:

if(confirm("Are you sure that the details are correct?")){
        postForm();
    }else{
         return false;
    }