JQuery et plugin de validation - comment ajouter un message promotionnel à l'envoi ?

Question

J'ai besoin de mettre un message promotionnel soit au bas du formulaire, soit dans une alerte lorsqu'un utilisateur répond à certains critères. Je pense qu'une alerte serait la meilleure solution. Comme il s'agit de certains codes postaux, je dois écrire une expression rationnelle (je ne l'ai pas encore fait). Il faut que cela se produise lorsque l'utilisateur clique sur "soumettre" et avant qu'il ne soit envoyé au serveur. Je ne suis pas sûr de savoir comment écrire cela et où le placer dans mon script. Voici ce que j'ai fait jusqu'à présent, si cela peut vous aider.

$(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');

Answer 1

Vous devriez être en mesure de faire quelque chose comme ceci (cela remplacera le comportement de soumission par défaut) :

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

Answer 2

Ecrivez une fonction de clic pour le bouton submit et appelez la fonction ajax dans cette fonction.

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

ajax dans Jquery.

Answer 3

Vous devez fournir un submitHandler en tant qu'option de l'option valider méthode.

Answer 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;
},
...

Une fonction a

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"); })
}