Merge pull request #2340 from Laravel-Backpack/fix-html5-validation

[Bug Fix] Save actions inside dropdown don't trigger HTML5 Validation

Author: tabacitu

src/resources/views/crud/form_content.blade.php

@@ -119,15 +119,8 @@ function preventUnload(event) {
       @endif
 
       // Save button has multiple actions: save and exit, save and edit, save and new
-      var saveActions = $('#saveActions'),
-      crudForm        = saveActions.parents('form'),
-      saveActionField = $('[name="_save_action"]');
-
-      saveActions.on('click', '.dropdown-menu a', function(){
-          var saveAction = $(this).data('value');
-          saveActionField.val( saveAction );
-          crudForm.submit();
-      });
+      var saveActions = $('#saveActions')
+      crudForm        = saveActions.parents('form')
 
       // Ctrl+S and Cmd+S trigger Save button click
       $(document).keydown(function(e) {

src/resources/views/crud/inc/form_save_buttons.blade.php

@@ -13,11 +13,11 @@
 
         <div class="btn-group" role="group">
             @if(!empty($saveAction['options']))
-                <button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">&#x25BC;</span></button>
-                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-                    @foreach( $saveAction['options'] as $value => $label)
-                    <a class="dropdown-item" href="javascript:void(0);" data-value="{{ $value }}">{{ $label }}</a>
-                    @endforeach
+                <button id="bpSaveButtonsGroup" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">&#x25BC;</span></button>
+                <div class="dropdown-menu" aria-labelledby="bpSaveButtonsGroup">
+                @foreach( $saveAction['options'] as $value => $label)
+                    <a class="dropdown-item" href="#" data-value="{{ $value }}">{{ $label }}</a>
+                @endforeach
                 </div>
             @endif
         </div>
@@ -33,3 +33,82 @@
     </div>
 @endif
 
+@push('after_scripts')
+<script>
+
+    // this function checks if form is valid. 
+    function checkFormValidity(form) {
+        // the condition checks if `checkValidity` is defined in the form (browser compatibility)
+        if (form[0].checkValidity) {
+            return form[0].checkValidity();
+        }
+        return false;
+    }
+
+    // this function checks if any of the inputs has errors and report them on page.
+    // we use it to report the errors after form validation fails and making the error fields visible
+    function reportValidity(form) {
+        // the condition checks if `reportValidity` is defined in the form (browser compatibility)
+        if (form[0].reportValidity) {
+            // hide the save actions drop down if open
+            $('#saveActions').find('.dropdown-menu').removeClass('show');
+            // validate and display form errors
+            form[0].reportValidity();
+        }
+    }
+
+    function changeTabIfNeededAndDisplayErrors(form) {
+        // we get the first erroed field
+        var $firstErrorField = form.find(":invalid").first();
+        // we find the closest tab
+        var $closestTab = $($firstErrorField).closest('.tab-pane');
+        // if we found the tab we will change to that tab before reporting validity of form
+        if($closestTab.length) {
+            var id = $closestTab.attr('id');
+                // switch tabs
+                $('.nav a[href="#' + id + '"]').tab('show');
+        }
+        reportValidity(form);
+    }
+
+    // make all submit buttons trigger HTML5 validation
+    jQuery(document).ready(function($) {
+
+        var selector = $('#bpSaveButtonsGroup').next();
+        var form = $(selector).closest('form');
+        var saveActionField = $('[name="save_action"]');
+        var $defaultSubmitButton = $(form).find(':submit');
+        // this is the main submit button, the default save action.
+        $($defaultSubmitButton).on('click', function(e) {
+            e.preventDefault();
+            $saveAction = $(this).children('span').eq(1);
+            // if form is valid just submit it
+            if(checkFormValidity(form)) {
+                saveActionField.val( $saveAction.attr('data-value') );
+                form.submit();
+            }else{
+                // navigate to the tab where the first error happens 
+                changeTabIfNeededAndDisplayErrors(form);
+            }
+        });
+
+        //this is for the anchors AKA other non-default save actions.
+        $(selector).find('a').each(function() {
+            $(this).click(function(e) {
+                //we check if form is valid
+                if (checkFormValidity(form)) {
+                    //if everything is validated we proceed with the submission
+                    var saveAction = $(this).data('value');
+                    saveActionField.val( saveAction );
+                    form.submit();
+                }else{
+                    // navigate to the tab where the first error happens 
+                    changeTabIfNeededAndDisplayErrors(form);
+                }
+                e.stopPropagation();
+            });
+        });
+    });
+
+    </script>
+@endpush