jQuery valider plugin avec event.preventDefault()

Question

J'ai une page qui a un formulaire de contact glisser vers le bas quand un lien est cliqué (il est un div sur la page qui affiche avec .slideDown ('slow')

J'ai le plugin de validation jQuery qui fonctionne sur le formulaire de contact, seulement j'ai remarqué que lors de mes tests j'ai eu event.preventDefault(), commenté Dans la version finale, je veux que cela ne soit pas commenté parce que je ne veux pas la page pour rediriger ou même poster lorsque vous cliquez sur Soumettre.

Je le bouton Soumettre l'envoi d'un message Ajax pour envoyer le courrier électronique. Comment puis-je conserver cette fonctionnalité et toujours utiliser le plugin jQuery validate?

Answer 1

Au lieu de définir une action sur le formulaire $.bind() un gestionnaire click au bouton d'envoi de formulaires et utilisez $.post() pour effectuer la demande de publication. Quelques mots de prudence cependant. Tout d'abord, vous devez probablement définir l'action sur le formulaire et la rediriger par défaut pour les personnes qui ont Javascript désactivé, puis utiliser jQuery pour supprimer l'action du formulaire et $.bind() le gestionnaire click pour le bouton d'envoi lorsque la page se charge. Deuxièmement, dans mon code lorsque je dis utiliser une alerte ou une autre notification accessible, j'utilise la méthode alert() ou si vous utilisez un élément dom pour contenir la notification, assurez-vous d'utiliser WAI-ARIA les attributs de région et de rôle pour rendre la notification accessible aux appareils fonctionnels.

function onFormSubmit(event) 
{ 
     $.post('http://url.to.your.service', 
      $('#theFormId').serialize(), 
      function(data, textStatus) 
      { 
        switch(textStatus) 
        { 
         // Alert or some other 
         // accessible notification of success/failure 
        } 
      } 
    ); 
} 

EDIT: J'ai vraiment besoin de lire les questions plus attentivement parfois. Vous utilisez déjà le bouton "Envoyer" pour envoyer une requête AJAX. Peut-être que mes commentaires sur l'utilisabilité vous seront utiles, alors je vais laisser cette partie de la réponse vers le haut. Si vous définissez l'action sur javascript:null(0), # ou définissez la cible sur un cadre iFrame caché, cela devrait également fonctionner.