跳过某些 Bootstrap 4 输入的验证反馈

Question

通过关注Bootstrap's docs on form validation，我可以验证我的表单，但我还没有找到一种方法来让特定字段（例如文本输入或复选框）不显示验证反馈而其他所有字段都显示。

我的意思是：如何让某些特定字段在验证表单时跳过获取 :valid 或 :invalid 伪类，或者即使它们确实应用了伪类，我怎么能跳过它们不会被视觉格式化为其他字段？

也许有一个与.was-validated相反的类可以应用于特定领域？

引导版本：v4.0.0-beta.3

Answer 1

因为非必填字段默认有效 您可以通过在输入 .form-control 中添加一个类来覆盖 :valid 伪类，例如：no-validate

如果您使用 npm 并且正在导入 boostrap，则可以使用引导变量

.form-control.no-validate:valid {
    border-color: $input-border-color;
    padding: $input-padding-x;
    background: $input-bg;
}

如果没有，你可以添加默认值：

.form-control.no-validate:valid {
    border-color: #ced4da;
    padding-right: .75rem;
    background: none;
}

Answer 2

不需要的表单字段有一个伪类:valid。因此，如果您将.was-validated 类添加到您的表单中，所有这些都将突出显示为有效。

要仅突出显示需要的字段，您不应使用默认验证，而应仅检查必要的字段，如下所示：

if ($(this).val() != "" && $(this).prop("validity").valid) {
  $(this).addClass("is-valid");
} else {
  $(this).addClass("is-invalid");
}

如果您使用 bootstrap4，它将在代码执行后正确突出显示这些字段。

你可以在JSFiddle查看它

Answer 3

我的客户要求我不要标记空的非必填字段。 另一方面，我必须将前端与后端验证结合起来 防止黑客攻击并便于对数据库进行验证。

以下示例基于 BS4，thymeleaf，并受到 @ksiger 在他的 JSfiddle 中的想法的启发（见上文），但必须进行修改以符合我的标准。

所以，首先让我们检查一下表单（注意课堂）：

 <form id="myForm" action="#" th:action="@{/formurl}" th:object="${myForm}"
       method="post" novalidate class="needs-custom-validation">

为了验证，我只使用“is-valid”和“is-invalid”类。让我们看看jQuery的东西：

$(function () {
    // validate field on change
        $(':input').change(function (event) {
            var isValid = checkField(this);
            // ... I'm doing something here ...
            return isValid;
        });

    // check field validity
        checkField = function (fld) {
            var isRequired = $(fld).prop('required');
            var isValid = $(fld).prop("validity").valid;
            var isEmpty = $(fld).val() == "";
            $(fld).removeClass("is-valid").removeClass("is-invalid");
            if (isValid) {
                if (!isEmpty)
                    $(fld).addClass("is-valid");
                return true;
            } else {
                $(fld).addClass("is-invalid");
                return false;
            }
        }

        /* form validation */
        checkForm = function (f) {
            var isValid = true;
            $(f).find("input, textarea, select").each(function () {
                isValid = checkField(this) && isValid; // "&&" is shortcut
            });
            return isValid;
        }

        $('[class="needs-custom-validation"]').submit(function (event) {
            if (!checkForm(this)) {
                event.preventDefault();
                event.stopPropagation();
                return false;
            }
            // call ajax here or let it bubble to the submit button
        });
});

这就是全部的魔力。

Answer 4

您可以将.was-validated 添加到要显示验证的输入的父元素中。

例如，如果您将输入放在带有 .form-group 类的 div 中，您可以这样做：

 <div class="form-group was-validated">
   <label for="formGroupExampleInput">Example label</label>
   <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>

如果任何父元素具有.was-validated 类，则验证样式适用，具有.was-validated 类的父元素是否是表单无关紧要。我看不到它的文档，但它会随着 Bootstrap CSS 避免针对特定的 HTML 元素而改变。

Answer 5

尝试将formnovalidate="formnovalidate" 添加到提交按钮。这将跳过 required 属性并允许您提交任何引导验证。