15

通过遵循Bootstrap 的有关表单验证的文档，我可以验证我的表单，但我还没有找到一种方法，以便特定字段（例如文本输入或复选框）不显示验证反馈而其他所有字段都显示。

我的意思是：如何使某些特定字段在验证表单时跳过获取:valid或:invalid伪类，或者即使它们确实将伪类应用于它们，我怎样才能跳过它们在视觉上格式化为其他字段?

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

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

4

5 回答 5

4

因为默认情况下不需要的字段有效您可以:valid通过添加输入.form-control类来创建覆盖伪类：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;
}
于 2019-08-02T09:34:03.177 回答
2

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

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

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

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

您可以在JSFiddle上检查它

于 2019-06-25T13:33:35.843 回答
0

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

以下示例基于 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
        });
});

这就是全部的魔法。

于 2020-01-22T21:27:43.450 回答
-1

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

例如，如果您将输入放在类的 adiv中.form-group，您可以执行以下操作：

 <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 元素而改变。

于 2018-02-10T18:15:17.540 回答
-2

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

于 2019-04-30T13:59:11.833 回答