Custom username validity message in registration

src/themes/d4science/login/register.ftl

@@ -78,9 +78,33 @@
                 </div>
 
                 <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
+                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="submitBtn" type="submit" value="${msg("doRegister")}"/>
                 </div>
             </div>
         </form>
+
+        <script type="text/javascript">
+            var screenname = document.getElementById("username")
+            if (screenname) {
+                screenname.addEventListener("input", function(ev) {
+                    if (screenname.validity.patternMismatch) {
+                        screenname.setCustomValidity('${msg("usernameValidityMsg")}')
+                        screenname.reportValidity()
+                    } else {
+                        screenname.setCustomValidity('')
+                        screenname.reportValidity()
+                    }
+                })
+            }
+
+            var kcRegisterForm = document.getElementById("kc-register-form")
+            kcRegisterForm.submitBtn.addEventListener("click", function(ev) {
+                if (!kcRegisterForm.checkValidity()) {
+                    ev.preventDefault()
+                    ev.stopPropagation()
+                    kcRegisterForm.reportValidity()
+                }
+            })
+        </script>
     </#if>
 </@layout.registrationLayout>