JQuery et valider le plugin - comment ajouter un message promotionnel sur soumettre

Question

Je dois mettre un message promotionnel soit au bas du formulaire ou dans une alerte lorsqu'un utilisateur répond à certains critères. Je pense qu'une alerte pourrait être meilleure. C'est à voir avec certains codes postaux donc je vais devoir écrire une regex (je ne l'ai pas encore fait). Cela doit se produire lorsque l'utilisateur clique sur Envoyer et avant de passer au serveur. Je ne suis pas sûr de savoir comment écrire cela et où il devrait être placé dans mon script. C'est ce que j'ai jusqu'ici si ça aide.

$(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

Ecrire une fonction de clic pour le bouton soumettre et appeler la fonction ajax dans ce

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

ajax dans Jquery.

Answer 2

Vous devez fournir un objet submitHandler en tant qu'option à la méthode validate.

Answer 3

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

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

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

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