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

Question

简介

我在 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();
        }
    });
}

Answer 1

您的代码根本没有找到 .invalid-feedback，因为它不是 element 的祖先，而 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/

在 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

javascript

jquery

jquery-validate

symfony

bootstrap-4

简介

预期

采取的步骤

例子

代码