如何在提交之前手动触发活动表单验证？

Question

是否可以通过JavaScript编程调用活动表单验证？在执行一些ajax操作之前，我需要调用验证过程。

- AleCat83

---

您可以在此处找到文档：https://yii2-cookbook-test.readthedocs.io/forms-activeform-js/ - Timothée Planchais

Answer 1

我回复有些晚，但我刚刚遇到同样的问题，所以soju提供的解决方案对我也不起作用。

于是我深入研究了ActiveForm的JS代码，并发现它似乎监控每个字段的状态，并且如果字段是“未更改”状态，则不会触发验证，除非实际提交表单。因此，我将我的调用更改为：

var $form = $("#my-form"), 
    data = $form.data("yiiActiveForm");
$.each(data.attributes, function() {
    this.status = 3;
});
$form.yiiActiveForm("validate");

现在看起来它正在按我预期的方式运作。

- BlueZed

---

我不确定为什么这个答案没有被接受，因为它是第一次按预期工作的东西。 - Edna

validate takes a parameter called forceValidate. In short ... all you need to do is: $('#my-form').yiiActiveForm('validate', true); - Definitely not Rafal

Answer 2

我们可以通过合并@BlueZed和@S Rana的答案来实现这一点。

您可以编写以下脚本，以便我们可以检查表单是否有任何错误，如果有错误，则表单不会提交（即使对于类似表格（向导）的表单也适用）。

    var $form = $("#form"), 
        data = $form.data("yiiActiveForm");
    $.each(data.attributes, function() {
        this.status = 3;
    });
    $form.yiiActiveForm("validate");

    if ($("#form").find(".has-error").length) {
        return false;
    }

- DS9

---

以上示例适用于BS 3。对于Bootstrap 4，请使用不同的CSS错误类：if ($form.find(".is-invalid:first").length) {return false}。 - lubosdz

Answer 3

感谢blue zed，

但在此之前 -

要添加表单字段，您需要执行以下步骤...

// 您的输入

$inputData = $form->field($model,"prductName");

//这个代码会删除下一行并将双引号转换为单引号

$newInputData= trim(preg_replace('/\s+/', ' ',str_replace('"',"'", $inputData)));

// 然后像这样添加

$("#table").append("'.$newInputData.'");

// 这个方法对我有效，同时也可以使用下面这种蓝色的Zend解决方案

$this->registerJs('
    $(document).on("click","input[type=text]",function(){
            var $form = $("#w0"), 
            data = $form.data("yiiActiveForm");
            $.each(data.attributes, function() {
                this.status = 3;
            });
            $form.yiiActiveForm("validate");        
    });
');

- Nikhil Kadam

Answer 4

这对我有用。

$this->registerJs( "
        $('body').on('beforeSubmit', 'form#product-form', function () {
             var form = $(this);
             // return false if form still have some validation errors
             if (form.find('.has-error').length) {
                  return false;
             }
             // submit form
             $.ajax({
                  url: form.attr('action'),
                  type: 'post',
                  data: form.serialize(),
                  success: function (response) {

                  }
             });
             return false;
        }); ");

- uiTeam324

Answer 5

是的，这是可能的，你应该尝试这个：

$('#form-id').yiiActiveForm('validate');

- soju

---

你好，感谢回复。我已经尝试了上面的代码，但仍然无法执行表单验证。没有返回任何JavaScript错误，如果我尝试警告结果，它会给我“未定义”。 - AleCat83

此方法验证您的表单输入并显示相应的错误，它不会返回任何内容。 - soju

我需要加载其他配置或资源才能使它工作吗？我尝试运行上面的代码（使用我的表单ID），但验证未执行。。 - AleCat83

这对我也不起作用。原因是为了执行验证，表单必须处于提交状态，或者输入必须具有状态2或3，表示输入正在等待验证。您可以通过将true作为第二个参数传递来强制进行提交状态，但这将导致在验证完成后提交表单。 - Edna

Answer 6

我曾经遇到过同样的问题。在官方文档中没有明确的解决方案，而且我不知道为什么Stackoverflow上的任何解决方案都对我无效。也许在yii2的不同版本中有不同的解决方法。我花了很多时间来寻找解决方案。在我的情况下，我已经触发了表单上每个输入的验证：

$('#form-id').data('yiiActiveForm').submitting = false;
$('#form-id').yiiActiveForm('validateAttribute', 'input-id'); //this will triger validation for input with id 'input-id'
$('#form-id').yiiActiveForm('validateAttribute', 'other-input-id'); //this will triger validation for input with id 'other-input-id'

请注意yiiActiveForm()函数的第二个参数，它不是选择器，也不是属性名称，而是属性输入框的ID！！！

- Roman Yakoviv

Answer 7

如果要从JavaScript手动验证，您应该将以下代码放置在表单提交事件的末尾。

return  $('#your-form-id').yiiActiveForm('validate');

对于初学者用户，

$('#your-form-id').submit(function () {       
    return  $('#your-form-id').yiiActiveForm('validate');
});

另外请注意，您应该像下面这样在ActiveForm上指定表单id。

<?php $form = ActiveForm::begin(['id' => 'd4d-hub-form']); ?>

- rishad2m8

Answer 8

试试这个

$("#form-id").data('yiiActiveForm').submitting = true; 
$("#form-id").yiiActiveForm('validate');

如果任何字段无效，它将显示验证错误。 此外，如果所有字段都有效，则会提交请求

- Hitesh Jangid

Answer 9

在提交表单时激活验证。 因此，这将起作用：

$form.data('yiiActiveForm').submitting = true;
$form.yiiActiveForm('validate', false);

validate 的第二个参数被称为 forceValidate。

- clapas