SASS隔离和HTML5表单验证问题

Question

I isolated the CSS with Bootstrap 4 using this SASS:

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

That imported all of bootstrap css with .iso-bootstap in front of all the elements isolating it so I can only use bootstrap within a div with the class of "iso-bootstrap".

I've noticed this has rendered the following validation JavaScript useless. I'm not too JavaScript savvy to know how to modify the JavaScript to understand what the CSS is doing now that .iso-bootstap is applied before everything.

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

If someone could help me out and point me in the right direction or help me fix this, that would be greatly appreciated!

Thanks in advance!

Answer 1

I figured out my issue. For anyone using SASS to isolate bootstrap into a class. My problem was that my compiler, CodeKit, compiled and implimented classes for the validation backwards. So ".was-validated .iso-bootstap" needed to be ".iso-bootstap .was-validated".