Question

我使用此SASS将CSS与Bootstrap 4隔离：

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

在所有隔离它的元素前导入所有带有.iso-bootstap的bootstrap css，所以我只能在div中使用“iso-bootstrap”类的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>

如果有人可以帮助我并指出我正确的方向或帮我解决这个问题，那将非常感激！

提前致谢！

Answer 1

我想出了我的问题。对于任何使用SASS将引导程序隔离到类中的人。我的问题是我的编译器，CodeKit，编译并向后推销验证类。所以“.was-validated .iso-bootstap”必须是“.iso-bootstap .was-validated”。

使用HTML5表单验证问题进行SASS隔离

1 个答案: