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)"但是用于验证错误的值是多少？

我也知道这个“问题”有一些插件，但是大多数人都没有超过2年的支持，我想尽量避免使用插件。

感谢。

Answer 1

您可以使用名为＆＃39; wpcf7submit＆＃39;的其中一个dom事件来实现此目的。可在联系表格7中找到。

＆＃34; wpcf7submit - 成功完成Ajax表单提交时触发，无论其他事件如何。＆＃34;

当发生验证错误时，也会触发此事件。

例如，如果要显示具有ID＆＃39; txt_name＆＃39;的必填字段的弹出窗口您将在主题的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

希望这有帮助。

弹出式窗口

1 个答案: