add support for HTML5 'required' validation

close snapappointments#514, close snapappointments#754
JoshLabs · May 14, 2020 · 2ec59e7 · 2ec59e7
1 parent 2e1e1f3
commit 2ec59e7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/js/bootstrap-select.js b/js/bootstrap-select.js
@@ -321,14 +321,15 @@
       var that = this,
           id = this.$element.attr('id');
 
-      this.$element.addClass('bs-select-hidden');
       // store originalIndex (key) and newIndex (value) in this.liObj for fast accessibility
       // allows us to do this.$lis.eq(that.liObj[index]) instead of this.$lis.filter('[data-original-index="' + index + '"]')
       this.liObj = {};
       this.multiple = this.$element.prop('multiple');
       this.autofocus = this.$element.prop('autofocus');
       this.$newElement = this.createView();
-      this.$element.after(this.$newElement);
+      this.$element
+        .after(this.$newElement)
+        .appendTo(this.$newElement);
       this.$button = this.$newElement.children('button');
       this.$menu = this.$newElement.children('.dropdown-menu');
       this.$menuInner = this.$menu.children('.inner');
@@ -371,6 +372,32 @@
         }
       });
 
+      if (that.$element[0].hasAttribute('required')) {
+        this.$element.on('invalid', function () {
+          that.$button
+            .addClass('bs-invalid')
+            .focus();
+
+          that.$element.on({
+            'focus.bs.select': function () {
+              that.$button.focus();
+              that.$element.off('focus.bs.select');
+            },
+            'shown.bs.select': function () {
+              that.$element
+                .val(that.$element.val()) // set the value to hide the validation message in Chrome when menu is opened
+                .off('shown.bs.select');
+            },
+            'rendered.bs.select': function () {
+              // if select is no longer invalid, remove the bs-invalid class
+              if (this.validity.valid) that.$button.removeClass('bs-invalid');
+              that.$element.off('rendered.bs.select');
+            }
+          });
+
+        });
+      }
+
       setTimeout(function () {
         that.$element.trigger('loaded.bs.select');
       });
@@ -1562,7 +1589,7 @@
       this.$element.remove();
     },
 
-    destroy: function() {
+    destroy: function () {
         this.$newElement.remove();
 
         if (this.$bsContainer) {

diff --git a/less/bootstrap-select.less b/less/bootstrap-select.less
@@ -327,11 +327,6 @@
   }
 }
 
-select.bs-select-hidden,
-select.selectpicker {
-  display: none !important;
-}
-
 select.mobile-device {
   position: absolute !important;
   top: 0;
@@ -341,3 +336,17 @@ select.mobile-device {
   height: 100% !important;
   opacity: 0;
 }
+
+.bootstrap-select > .dropdown-toggle {
+  z-index: 1;
+}
+
+.bootstrap-select > select {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0.11px;
+  height: 100%;
+  opacity: 0;
+  border: none;
+}