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

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

简介

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

期待

我希望验证看起来相同 - 使用 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,validClass)
        {
            $(element).removeClass('is-invalid');
            $(element).closest('.invalid-Feedback').toggle();
        }
    });
}

解决方法

您的代码根本找不到 '2021-02-25 05:00:00.000+00:00'，因为它不是 '2021-02-25 05:00:00-05:00' 元素的祖先 .invalid-feedback。此外，您的选择器 element 不足以隐藏嵌套的 <input>。

这似乎运行良好：

('.invalid-feedback')

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