Formulaire de contact 7 erreur de validation dans la fenêtre

Question

** MISE À JOUR ** À droite, j'ai joué un peu et j'ai remarqué que le form .wpcf7-form obtient une classe invalid lorsque certains champs sont manquants. Donc, ce que je voudrais, c'est que lorsque la classe invalide est ajoutée, une alerte apparaîtra. Ceci est mon code à ce jour:

$(document).ready(function(){ 

    $('form.wpcf7-form').click(function(){  
     if ($(this).hasClass('invalid')) { 
      alert('Error Mess.'); 
     } 
    }); 
} 

Le seul problème est maintenant que je reçois l'erreur:

13:17:24.023 SyntaxError: expected expression, got ')'

Où est ce manque?

J'ai essayé de faire fonctionner cela depuis un certain temps maintenant. Je voudrais avoir les erreurs de validation que le formulaire de contact 7 donne dans une fenêtre pop-up. Pourquoi, parce que l'erreur de validation sous le bouton casse mon style de page.

J'ai essayé de positionner l'erreur de validation en utilisant CSS, ce genre de travaux. Mais l'erreur continue d'être affichée sur le formulaire de contact, et il n'y a aucun moyen de le supprimer (clic ou autre).

Je sais que vous pouvez placer des informations supplémentaires comme javascript (on_send_ok:"alert(Your message)" Mais quelle valeur est utilisée pour l'erreur de validation? Je sais aussi qu'il y a des plugins pour ce "problème" mais la plupart d'entre eux n'ont plus de support depuis plus de 2 ans et j'aimerais éviter d'utiliser des plugins autant que possible.

Merci.

Answer 1

Vous pouvez y parvenir en utilisant l'un des événements de dom appelés « wpcf7submit » disponible dans Formulaire de contact 7.

« wpcf7submit - se déclenche quand un envoi de formulaire Ajax a terminé avec succès, quel que soit d'autres incidents. »

Cet événement se déclenchera si une erreur de validation se produit également.

Par exemple, si vous voulez montrer pop-up pour un champ obligatoire qui a « txt_name » ID vous ajoutez ce code dans le fichier functions.php de votre thème:

<?php 
function conactform_validation_error_popup() { 
?> 
    <script type="text/javascript"> 
     document.addEventListener('wpcf7submit', function(event) { 
      if ('4' == event.detail.contactFormId) { // your contact form ID 
       if(event.detail.status = 'validation_failed'){ // if validation fails 
        var invFields = event.detail.apiResponse.invalidFields; 
        jQuery.each(invFields, function(key, obje){ 
         if(obje.idref == 'txt_name'){ 
          alert('Please add a name.'); 
         } 
        }); 
       } 
      } 
     }, false); 
    </script> 
<?php 
} 
add_action('wp_footer', 'conactform_validation_error_popup'); 
?> 

Ci-dessous les images expliquer comment cela fonctionne.

Steps shown in code

Steps shown in result JSON

Hope this helps.