如何从有效控件中禁用 Bootstrap 4 验证样式

问题描述 投票：0回答：11

我正在为我的应用程序使用 Bootstrap 4 样式。应用程序有两个文本框和一个提交按钮。当您单击“保存”按钮时，它将调用 Web API 并异步获取一些详细信息（它不会重定向页面）。 验证仅适用于第一个文本框。

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Test Page</title>
</head>

<body>
  <form class="container needs-validation" novalidate>
    <div class="form-group row mt-5">
      <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
      <div class="col-sm-10">
        <input type="tel" class="form-control" placeholder="Please enter your name" required />
        <div class="invalid-feedback">
          Please enter the name.
        </div>
      </div>
    </div>
    <div class="form-group row mt-5">
      <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
      <div class="col-sm-10">
        <input type="tel" class="form-control" />
      </div>
    </div>
    <div class="form-group row">
      <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save" />
    </div>
  </form>
</body>

</html>

我的问题：

当我单击“保存”按钮而不在文本框中输入任何值时，绿色样式（验证真实样式）将应用于“地址”文本框。我不希望这种事发生。

如果验证失败，我只需要应用红色样式（验证失败样式）。如果输入了值（验证为真），我不需要将任何样式应用于文本框。

此外，当我在“名称”文本框中输入一些值并单击“保存”按钮时，我不希望该文本框具有绿色样式。

截图：

Screenshot

javascript jquery html css bootstrap-4
11个回答
13
投票

我不喜欢覆盖 CSS 样式，因此您也可以选择只指定要验证的字段而不是整个表单。

向您的 

.form-group
元素添加一个类（例如 
.validate-me
）

    <form class="container needs-validation" novalidate>
        <div class="form-group row mt-5 validate-me">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="Please enter your name" required />
                <div class="invalid-feedback">
                    Please enter the name.
                </div>
            </div>
        </div>
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" formnovalidate="formnovalidate" id="address" />
            </div>
        </div>
        <div class="form-group row">
            <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
        </div>
    </form>

现在稍微改变一下你的 JavaScript，用 

form-group
类检索所有 
validate-me
，而不是调用 
form.classList.add('was-validated')
循环遍历所有捕获的表单组并向它们添加 
was-validated
。

window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');

                // Get all form-groups in need of validation
                var validateGroup = document.getElementsByClassName('validate-me');

                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }

                        //Added validation class to all form-groups in need of validation
                        for (var i = 0; i < validateGroup.length; i++) {
                            validateGroup[i].classList.add('was-validated');
                        }
                    }, false);
                });
            }, false);
6
投票

您可能想看看这个答案。

具体来说，不要将 

.was-validated
添加到整个表单，而只需将 
.is-invalid
添加到具有 
:invalid
伪类的表单元素。

此代码应该适用于您的情况：

for (var i = 0; i < validateGroup.length; i++) {
    var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
    for (var j = 0; j < invalidGroup.length; j++) {
        invalidGroup[j].classList.add('is-invalid');
    }
}
5
投票

您可以覆盖 is-valid 验证的 css。当您右键单击绿色复选框并选择检查时，您可以看到哪个类导致绿灯

enter image description here 所以你应该指定不从 bootstrap 继承那些。代码应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <style>
    .form-control.is-valid:focus, .was-validated :valid.form-control{ border-color:inherit !important;
    background-image: inherit !important;
    box-shadow:inherit !important;}

 </style>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Test Page</title>
    <script type="text/javascript">
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>

</head>
<body>
    <form class="container needs-validation" novalidate id="myFrom" >
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" placeholder="Please enter your name" required />
                <div class="invalid-feedback">
                    Please enter the name.
                </div>
            </div>
        </div>
        <div class="form-group row mt-5">
            <label for="txtSessionDescription" class="col-2 col-md-2 col-sm-2 col-form-label">Address:</label>
            <div class="col-sm-10">
                <input type="tel" class="form-control" />
            </div>
        </div>
        <div class="form-group row">
            <input type="submit" class="btn btn-primary" style="width: 100px;" value="Save"/>
        </div>
    </form>
</body>
</html>

我添加的是head标签下方的style标签和css选项。

4
投票

覆盖 

$form-validation-states
scss 变量。这在 Bootstrap 5 中有记录，但同样的技术也适用于版本 4。

https://v5.getbootstrap.com/docs/5.0/forms/validation/#customizing

$form-validation-states: (
  "valid": (                               <-- delete this
    "color": $form-feedback-valid-color,
    "icon": $form-feedback-icon-valid
  ),
  "invalid": (
    "color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid
  )
);
3
投票
  (function () {
    'use strict';
    window.addEventListener('load', function () {
        const forms = document.getElementsByClassName('needs-validation');
        Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                const invalidGroup = form.querySelectorAll(":invalid");
                for (let j = 0; j < invalidGroup.length; j++) {
                    invalidGroup[j].classList.add('is-invalid');
                }
            }, false);
        });
    }, false);
})();
1
投票

@Ilker Kadir Ozturk 的帖子仅通过使用样式为我工作，除了我的有效字段边框继承自我不想使用的先前颜色（黑色）。 我在 Razor 页面中使用 Bootstrap 4 和 ASP.NET MVC。 这是他用我的颜色调整的代码（#DDDDDD）。我也在样式上方添加了我的评论：

 @*  This is to prevent the green color style on Bootstrap validation to be applied to all textboxes when the info is valid.
    Only the red color style(validation failed style) should be applied if the validation failed.
    If the values are ok, no styling should be applied to the text boxes.
    Also when the "submit" button is clicked, there is no need for the green color styling to show up either.
 *@

<style>
    .form-control.is-valid:focus, .was-validated :valid.form-control {
        border-color: #DDDDDD !important;
        background-image: inherit !important;
        box-shadow: inherit !important;
    }
</style>
0
投票

在案例验证成功时删除样式的部分解决方案

如果 

form.checkValidity()
评估为 true，则从表单中删除 
was-validated
类。

React Bootstrap中的示例：

有 

<Form noValidate validated={this.state.validated} onSubmit={this.onSubmit}>

onSubmit = (e) => this.setState({ validated: !e.currentTarget.checkValidity()});
0
投票

这是我使用 jQuery 对类似问题的解决方案：

在您的提交方法中，调用 

checkValidity()
后插入以下行：

$("#myForm").find(":valid").parent().removeClass("was-validated"); // Optional: Removes all green borders that have been fixed since last submit attempt
$("#myForm").removeClass("needs-validation");
$("#myForm").find(":invalid").parent().addClass("was-validated");

此解决方案仅为无效输入添加红色边框。不过，一旦它们被纠正，它们将显示为绿色边框，但就我个人而言，如果只有一个输入无效，我仍然更喜欢它而不是一片绿色田野......

0
投票

我想用一个例子来总结这一点。这一项包括：

  1. 验证某些需要添加类值的字段
    “验证我”
  2. 删除绿色验证样式
  3. 刷新无效验证

此示例将包含三个 html 输入：

enter image description here

这个例子的html代码是：

<form class="needs-validation "  novalidate>

    <div class="validate-me">
        <label for="firstNameId">First name</label>
        <input type="text" class="form-control" id="firstNameId" required>
        
        <div class="invalid-feedback">
            Please provide a first name.
        </div>
    </div>

    <div class="">
        <label for="miId">MI</label>
        <input type="text" class="form-control" id="miId"  required>
        
        <div class="invalid-feedback">
            Please provide a MI name.
        </div>
    </div>
    
    <div class="validate-me">
        <label for="lastNameId">Last name</label>
        <input type="text" class="form-control" id="lastNameId" required>
        
        <div class="invalid-feedback">
            Please provide a last name.
        </div>
    </div>
 ...
</form>

为了验证，请包含以下 js 函数：

(function () {
     'use strict';
      window.addEventListener('load', function () {
       // Fetch all the forms we want to apply custom Bootstrap validation styles to
       var forms = document.getElementsByClassName('needs-validation');

      // Get all form-groups in need of validation
       var validateGroup = document.getElementsByClassName('validate-me');

     // Loop over them and prevent submission
       var validation = Array.prototype.filter.call(forms, function (form) {
                                    form.addEventListener('submit', function (event) {
      if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
      }
           //Added validation class to diva in need of validation
     
         for (var i = 0; i < validateGroup.length; i++) {
             var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
             for (var j = 0; j < invalidGroup.length; j++) {
                   invalidGroup[j].classList.add('is-invalid');
                   invalidGroup[j].addEventListener("input", e => e.target.classList.remove("is-invalid"), { once: true });
             }
        }
     }, false);
  });
}, false);

因此，验证将仅应用于具有类值：“validate-me”的字段，绿色验证将被删除，红色无效消息将自动刷新。

enter image description here

没有绿色验证的示例：

enter image description here

0
投票

这对我有用（Bootstrap 5.3）

// ...

// 4. Include any default map overrides here
$form-validation-states: map-remove($form-validation-states, "valid");

// 5. Include remainder of required parts
@import "bootstrap/scss/maps";

// ...

从地图文档中删除

0
投票

我拆分了我们导入 Bootstrap 的方式，以便我们导入：

  1. 诸如 _variables 之类的基础知识以及所有非 CSS 生成部分（如函数和映射）。
  2. 我们的 SASS 变量覆盖。
  3. Bootstrap 的其余部分，对这些 SASS 变量做出反应。

在我们的覆盖中我们使用：

$form-validation-states: (
  "invalid": map-get($form-validation-states, "invalid")
);

我不确定为什么我们的平台不能与其他解决方案（例如 map-remove()）一起使用 - 它们没有效果，没有修复，没有错误。但上面明确构建了一个 only 无效的映射，并且通过将其放置在序列中的这个位置，它会在 _forms 触发并构建有效样式之前发生。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.