Add support for bootstrapForm validation of input groups

ServiceStack · Aug 5, 2019 · 626cdc4 · 626cdc4
1 parent 08631d8
commit 626cdc4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/ServiceStack/js/ss-utils.js b/src/ServiceStack/js/ss-utils.js
@@ -210,28 +210,31 @@
         if (errorMsg) {
             var isCheck = this.type === "checkbox" || this.type === "radio" || hasClass(this, 'form-check');
             var elFormCheck = isCheck ? parent(this,'form-check') : null;
+            var elInputGroup = parent(this,'input-group');
             if (!isCheck)
                 addClass(this, 'is-invalid');
             else
                 addClass(elFormCheck || this.parentElement, 'is-invalid form-control');
 
             var elNext = this.nextElementSibling;
-            var elLast = elNext && (elNext.getAttribute('for') === this.id || elNext.tagName === "SMALL")
-                ? (isCheck ? elFormCheck || elNext.parentElement : elNext)
-                : this;
+            var elLast = elInputGroup ? elInputGroup.lastElementChild : 
+                (elNext && (elNext.getAttribute('for') === this.id || elNext.tagName === "SMALL")
+                    ? (isCheck ? elFormCheck || elNext.parentElement : elNext)
+                    : this);
             var elError = elLast.nextElementSibling && hasClass(elLast.nextElementSibling, 'invalid-feedback')
                 ? elLast.nextElementSibling
-                : $.ss.createElement("div", { insertAfter:elLast }, { className: 'invalid-feedback' });
+                : (elInputGroup && elInputGroup.querySelector('.invalid-feedback')) 
+                  || $.ss.createElement("div", { insertAfter:elLast }, { className: 'invalid-feedback' });
             elError.innerHTML = errorMsg;
         }
     };
     function parent(el,cls) {
-        while (!hasClass(el,cls))
+        while (el && !hasClass(el,cls))
             el = el.parentElement;
         return el;
     }
     function hasClass(el, cls) {
-        return (" " + el.className + " ").replace(/[\n\t\r]/g, " ").indexOf(" " + cls + " ") > -1;
+        return el && (" " + el.className + " ").replace(/[\n\t\r]/g, " ").indexOf(" " + cls + " ") > -1;
     }
     function addClass(el, cls) {
         if (!hasClass(el, cls)) el.className = (el.className + " " + cls).trim();

diff --git a/tests/CheckWebCore/Configure.Auth.cs b/tests/CheckWebCore/Configure.Auth.cs
@@ -1,6 +1,7 @@
 using System.Collections.Generic;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
+using MyApp;
 using ServiceStack;
 using ServiceStack.Auth;
 using ServiceStack.Configuration;
@@ -43,7 +44,7 @@ public void Configure(IAppHost appHost)
 
             var authRepo = appHost.TryResolve<IAuthRepository>();
 
-            var newAdmin = new UserAuth {Email = "admin@email.com", DisplayName = "Admin User"};
+            var newAdmin = new AppUser {Email = "admin@email.com", DisplayName = "Admin User"};
             var user = authRepo.CreateUserAuth(newAdmin, "p@55wOrd");
             authRepo.AssignRoles(user, new List<string> {"Admin"});
         }

diff --git a/tests/CheckWebCore/wwwroot/validation/client-jquery/contacts/index.html b/tests/CheckWebCore/wwwroot/validation/client-jquery/contacts/index.html
@@ -17,7 +17,12 @@ <h3>Add new Contact</h3>
     </div>
     <div class="form-group">
         <label for="name">Full Name</label>
-        <input class="form-control" id="name" name="name" type="text" placeholder="Name">
+        <div class="input-group">
+            <input class="form-control" id="name" name="name" type="text" placeholder="Name">
+            <div class="input-group-append">
+                <button class="btn btn-outline-secondary" type="button">Button</button>
+            </div>
+        </div>
         <small id="name-help" class="text-muted">Your first and last name</small>
     </div>
     <div class="form-group">