Форма контакта 7 ошибка проверки при всплывании

Question

** ОБНОВЛЕНИЕ ** Правильно, я немного поиграл, и я заметил, что form .wpcf7-form получает класс invalid, когда некоторые поля отсутствуют. Так что я хотел бы, когда добавлен недопустимый класс, появится всплывающее предупреждение. Это мой код до сих пор:

$(document).ready(function(){ 

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

Единственная проблема теперь в том, что я получаю сообщение об ошибке:

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

Где это недостающее?

Я пытался заставить это работать некоторое время. Я хотел бы иметь ошибки проверки, которые отображаются в форме 7 во всплывающем окне. Почему, поскольку ошибка проверки ниже кнопки нарушает мой стиль страницы.

Я попытался поместить ошибку проверки с помощью CSS, такого рода работ. Но тогда ошибка сохраняется в форме контакта, и нет способа устранить ее (нажмите или иначе).

Я знаю, что вы можете разместить дополнительную информацию, такую ​​как javascript (on_send_ok:"alert(Your message)" Но какое значение используется для проверки валидации?

Я также знаю, что для этой «проблемы» есть некоторые плагины, но большинство из них не имеют поддержки более двух лет, и я хотел бы избежать использования плагинов как можно больше.

Спасибо.

Answer 1

Вы можете достичь этого, используя один из Dóm событий, называемых «wpcf7submit» доступна в Contact Form 7.

«wpcf7submit - Пожары, когда представление Ajax форма завершена успешно, независимо от других инцидентов.»

Это событие срабатывает при возникновении ошибки проверки.

Например, если вы хотите, чтобы показать всплывающее окно для требуемого поля, имеющего 'txt_name Ид вы добавите этот код под файл functions.php вашей темы:

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

Ниже изображений объяснить, как это работает.

Steps shown in code

Steps shown in result JSON

Надеется, что это помогает.