Yii2 - ActiveForm 和 afterValidate 事件

Question

我正在将 ActiveForm 与该afterValidate()事件一起使用，但目前afterValidate()会在任何验证事件上触发。我如何区分事件validateOnSubmit和validateOnBlur？validateOnChange

基本上，我只希望我的afterValidate()函数在提交时触发。这是我的代码：

PHP：

<?php $form = ActiveForm::begin([

    'id' => 'register-form',

    'options' => [

        'class' => 'validate-form',

    ],

    'enableClientValidation' => true,

    'enableAjaxValidation' => false,

    'validateOnSubmit' => true,

    'validateOnBlur' => true,

    'validateOnChange' => true,

]); ?>

JS：

// JS afterValidate function

$('.validate-form').on('afterValidate', function (event, messages, errorAttributes) {

    $('.error-popup').show();

    return false;

});

HTML：

<div class="error-popup">Please review the errors in the form below.</div>

正如您在上面的函数中看到的afterValidate()，如果存在验证错误，则会显示错误弹出窗口。但是，我只希望在用户提交表单时出现任何验证错误时出现此错误弹出窗口。

如果模糊/更改时出现验证错误，则应进行正常的内联验证，而不会弹出任何错误。

根据我的理解，beforeSubmit只有在验证通过时才会触发事件。

Answer 1

Yii 的活动表单 JS 将一些信息保存到yiiActiveForm数据属性中。您可以使用某些submitting属性来确定表单在提交之前是否处于验证状态。$('.validate-form').on('afterValidate', function (event, messages, errorAttributes) {&nbsp; &nbsp; let data = $('.validate-form').data('yiiActiveForm');&nbsp; &nbsp; //check if we are in submission process and if there are any errors&nbsp; &nbsp; if (data.submitting && errorAttributes.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; $('.error-popup').show();&nbsp; &nbsp; }});

Answer 2

您应该在 afterValidate 之后找到 has-error 类并显示弹出窗口尝试以下代码$('.validate-form').on('afterValidate', function (event, messages, errorAttributes) {&nbsp; &nbsp; &nbsp; &nbsp; if ($('.validate-form').find('.has-error').length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.error-popup').show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; });

Answer 3

您可以通过以下方式解决此问题：$("#register-form").on("beforeSubmit", function(event){&nbsp; &nbsp; $(this).yiiActiveForm('validateAttribute', 'contactform-phone');&nbsp; &nbsp; $(this).yiiActiveForm('validateAttribute', 'contactform-email');&nbsp; &nbsp; if ($(this).find('.has-error').length) {&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; }&nbsp; &nbsp; ...&nbsp; &nbsp; return false;});提交按钮会触发beforeSubmit事件，该事件又会触发您需要的任何字段的验证。如果验证结果错误，您可以执行与显示错误消息相关的 JS 逻辑。