Kontaktformular 7 Validierungsfehler im Popup

Question

** UPDATE ** Richtig, ich habe ein bisschen herumgespielt und mir ist aufgefallen, dass die form .wpcf7-form eine Klasse invalid bekommt, wenn einige Felder fehlen. Also, was ich möchte, ist, wenn die Klasse ungültig hinzugefügt wird eine Warnung Popup wird. Dies ist mein Code so weit:

$(document).ready(function(){ 

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

Das einzige Problem ist jetzt, dass ich den Fehler wurde immer:

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

Wo fehlt das?

Ich habe versucht, dies seit einiger Zeit zu arbeiten. Ich möchte die Validierungsfehler haben, die Kontaktformular 7 in einem Pop-up gibt. Warum, weil der Validierungsfehler unterhalb der Schaltfläche meinen Seitenstil bricht.

Ich habe versucht, den Validierungsfehler mit CSS, diese Art von Arbeiten zu positionieren. Aber der Fehler wird dann immer über dem Kontaktformular angezeigt, und es gibt keine Möglichkeit, es aus dem Weg zu bekommen (Klick oder sonst).

Ich weiß, dass Sie zusätzliche Informationen wie Javascript setzen können (on_send_ok:"alert(Your message)" Aber welcher Wert wird für den Validierungsfehler verwendet?

Ich weiß auch, dass es einige Plugins für dieses "Problem" gibt, aber die meisten von ihnen haben seit über 2 Jahren keine Unterstützung mehr und ich möchte Plugins so oft wie möglich vermeiden.

Danke.

Answer 1

Sie können diese mit einem der ‚wpcf7submit‘ in Kontaktformular 7.

genannt dom Ereignisse erreichen „wpcf7submit -. Wird ausgelöst, wenn eine Ajax-Formulareinreichung erfolgreich abgeschlossen wurde, und zwar unabhängig von anderen Vorfällen“

Dieses Ereignis wird ausgelöst, wenn ein Validierungsfehler auftritt.

Zum Beispiel, wenn Sie Popup für ein erforderliches Feld angezeigt werden soll, die ‚txt_name‘ ID hat, wird Sie diesen Code unter dem Thema der functions.php-Datei hinzufügen:

<?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'); 
?> 

Below Bilder erklären, wie es funktioniert.

Steps shown in code

Steps shown in result JSON

Hoffnung, das hilft.