Question

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

我的意思是：如何确认某些特定字段在表单验证时跳过获取ScriptEngineManager factory = new ScriptEngineManager(); ScriptEngine engine = factory.getEngineByName("JavaScript"); Invocable inv = (Invocable) engine; FileReader jsonata = new FileReader("jsonata.js"); // load the JSONata processor engine.eval(jsonata);或:valid伪类，或者即使它们确实将伪类应用于它们，我怎样才能将它们视觉格式化为其他字段？

也许有一个类可以作为:invalid的反面，可以应用于特定的字段？

Bootstrap版本：v4.0.0-beta.3

Answer 1

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

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

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

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

您可以在JSFiddle

上进行检查

Answer 2

因为默认情况下不需要字段有效您可以通过向输入:valid添加一个类ex {：.form-control

来覆盖no-validate伪类。

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

.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 3

我从客户那里得到的任务是不要标记空的非必需字段。另一方面，我不得不将前端与后端验证结合起来防止黑客入侵并简化针对数据库的验证。

以下示例基于thymeleaf BS4，并受到@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添加到要显示验证的输入的父元素。

例如，如果您使用div类在.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元素而改变。

Answer 5

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

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

5 个答案: