带有 HTML5 表单验证问题的 SASS 隔离答案

【问题标题】：SASS Isolation with HTML5 Form Validation Issue带有 HTML5 表单验证问题的 SASS 隔离
【发布时间】：2018-07-04 23:15:53
【问题描述】：

我使用这个 SASS 用 Bootstrap 4 隔离了 CSS：

.iso-bootstap {
  @import "bootstrap";
}

在所有隔离它的元素前面导入了所有带有 .iso-bootstap 的 bootstrap css，所以我只能在具有“iso-bootstrap”类的 div 中使用 bootstrap。

我注意到这导致以下验证 JavaScript 无用。我不太懂 JavaScript，不知道如何修改 JavaScript 以了解 CSS 在做什么，因为 .iso-bootstap 在一切之前都已应用。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="http://getbootstrap.com/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (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>

如果有人可以帮助我并指出正确的方向或帮助我解决此问题，将不胜感激！

提前致谢！

【问题讨论】：

标签： javascript css sass bootstrap-4 html5-validation

【解决方案1】：

我发现了我的问题。对于任何使用 SASS 将引导程序隔离到一个类中的人。我的问题是我的编译器 CodeKit 为向后验证编译和隐含了类。所以“.was-validated .iso-bootstap”需要是“.iso-bootstap .was-validated”。

【讨论】：