JQuery and validate plugin - how to add a promotional message on submit

问题:

I need to put a promotional message either at the bottom of the form or in an alert when a user meets certain criteria. I think an alert might be best. It's to do with certain postcodes so I will need to write a regex (I haven't done this yet). It needs to happen when the user clicks submit and before it goes to the server. I'm not sure how to write this and where it should be placed in my script. This is what I have so far if it helps.

$(document).ready(function(){ $("#orderForm").validate({     onfocusout: function(element) {          this.element(element);      },     rules: {         shipFirstName: {             required: true,         },         shipFamilyName: {             required: true,         },         shipPhoneNumber: {             required: true,         },         shipStreetName: {             required: true,         },         shipCity: {             required: true,         },         billEmailAddress: {             required: true,         },         billPhoneNumber: {             required: true,         },         billCardNumber: {             required: true,         },         billCardType: {             required: true,         },         shipPostalCode: {             postalCode: true,         },         fidelityCardNumber: {             creditCardNumber: true,         },     }, //end of rules }); // end of validate }); // end of function  $.validator.addMethod('postalCode',  function (value, element)  {       return this.optional(element) || /^[A-Z]{2}\d{1,2}\s\d{1,2}[A-Z]{2}$/.test(value); }, 'Please enter a valid Postal Code');   $.validator.addMethod('creditCardNumber',  function(value, element)  {     return this.optional(element) || /^[A-Z]{1}([A-Z]|\d){4}\s?([A-Z]|\d){5}\s?([A-Z]|\d){3}\d{1}(\!|\&|\@|\?){1}$/.test(value); }, 'Please enter a valid card number'); 

回答1:

You should be able to do something like this (this will replace the default submit behavior):

$("#orderForm").validate({     submitHandler: function(form) {         // code to display personal message         // code to handle form submission      },     onfocusout: function(element) {      ... 

回答2:

Write a click function for submit button and call ajax function in that

$("#submit").click(function(){   alert("This is a promotional message on submit");   //here write ur ajax code. }); 

ajax in Jquery.

回答3:

You need to provide a submitHandler as an option to the validate method.

回答4:

submitHandler: function(form) {     if ($("form #hasAsked").val() != 'true' && /[MK]{2}[1-15|17|19|77]{2}/.test($("#shipPostalCode").val()) {         openModalDialog();         return false;     }     return true; }, ... 

An a function

function openModalDialog() {       $("<div>Wanna buy?? <button value="yes" id="y/><button value="no" id="n/></div>")           .after("body p:first-child")           .show('slide')           .find("#y, #n").click(function() { $("form #hasAsked").val("true") /* default: false */; })           .end()           .find("#y")           .click(function() { $("form #hiddenbuy").val("true"); })           .end()           .find("#n")           .click(function() { $("form #hiddenbuy").val("false"); }) } 

文章来源: JQuery and validate plugin - how to add a promotional message on submit