在 Symfony v5.2 项目中使用 Jquery-validaton v1.19.3 + Bootstrap v4.6 进行输入验证答案

【问题标题】：Input validation with Jquery-validaton v1.19.3 + Bootstrap v4.6 in Symfony v5.2 project在 Symfony v5.2 项目中使用 Jquery-validaton v1.19.3 + Bootstrap v4.6 进行输入验证
【发布时间】：2021-05-29 13:20:27
【问题描述】：

简介

我在Symfony v5.2 项目中使用Bootstrap v4.6、jQuery v3.5.1 和jquery-validation v1.19.3 来验证用户输入。

期望

我希望验证看起来相同 - 使用 JavaScript 或 PHP。

采取的步骤

为此我举了一个例子jquery-validation on GitHub

我按照示例进行了操作 - 但部分错误消息仍保留在屏幕上。

示例

我创建了 jsfiddle 来提出问题：Examle on JSFiddle。

通过编写一个小于 3 或 大于 25 个字符的名称来检查。

代码

{
    let $app_locale = $('html')[0].lang;

    jQuery.validator.setDefaults(
    {
        lang: $app_locale,
        errorElement: 'span',
        errorPlacement: function(error, element)
        {
            let customError = $([
                '<span class="invalid-feedback mt-0 mb-2 d-block">',
                '  <span class="error-box mb-0 d-block">',
                '    <span class="form-error-icon badge badge-danger text-uppercase">Error</span>',
                '  </span>',
                '</span>'
            ].join(""));

            // Add `form-error-message` class to the error element
            error.addClass("form-error-message");

            // Insert it inside the span that has `mb-0` class
            error.appendTo(customError.find('.error-box'));

            // Insert your custom error
            customError.insertBefore(element);
        },
        highlight: function (element, errorClass, validClass)
        {
            $(element).addClass('is-invalid');
            $(element).closest('.invalid-feedback').toggle();
        },
        unhighlight: function (element, errorClass, validClass)
        {
            $(element).removeClass('is-invalid');
            $(element).closest('.invalid-feedback').toggle();
        }
    });
}

【问题讨论】：

标签： javascript jquery symfony bootstrap-4 jquery-validate

【解决方案1】：

您的代码根本找不到.invalid-feedback，因为它不是element 的祖先，它是<input> 元素。此外，您的选择器 ('.invalid-feedback') 不足以隐藏嵌套的 .error-box.d-block。

这似乎运作良好：

    highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
        $(element).closest('.form-group').find('span').show();
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
        $(element).closest('.form-group').find('span').hide();
    },

https://jsfiddle.net/chan_omega/9k0L285d/

【讨论】：