added validation

Author: Gourav Dwivedi

src/css/main.css

@@ -128,6 +128,22 @@ ul.nav .nav-link.active:hover {
   margin:0 auto;
 }
 
+.error {
+  width: 100%;
+  padding: 0;
+  margin: 0%;
+  font-size: 80%;
+  color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+  font-style: italic;
+  font-weight: bold;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+
 /* .mdl-layout__header-row {
   padding: 0px 0px 0px 80px;
   margin: 0 0 0 0;

src/js/components/logic/lib/app.common.js

@@ -40,11 +40,23 @@ function ShowElementByClassName(className) {
     }
 }
 
+function IsValidUrl(url)
+{
+    var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
+    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
+    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // ip (v4) address
+    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ //port
+    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+    '(\\#[-a-z\\d_]*)?$','i');
+    return pattern.test(url);
+}
+
 export { 
     ContentType, 
     AppEvents, 
     EnableElementByClassName, 
     DisableElementByClassName,
     HideElementByClassName,
-    ShowElementByClassName
+    ShowElementByClassName,
+    IsValidUrl
  };

src/js/components/srform.component.js

@@ -37,6 +37,7 @@ class SrFormComponent extends HTMLElement {
                                         <label for="inputUrl" class="col-sm-2 col-form-label">Hub Address</label>
                                         <div class="col-sm-8">
                                             <input type="text" class="form-control inputUrl" id="inputUrl" placeholder="Url" value="https://localhost:5001/Test/Hub">
+                                            <span class="error" aria-live="polite"><span>
                                         </div>
 
                                         <div class="col-sm-1 checkbox-container float-left" id="logger-chk-container">                               
@@ -110,6 +111,7 @@ class SrFormComponent extends HTMLElement {
                                         <label for="inputServerMethod" class="col-sm-2 col-form-label">Server Method</label>
                                         <div class="col-sm-10 offset-sm-2">
                                             <input type="text" class="form-control" id="inputServerMethod" placeholder="Server Method Name">
+                                            <span class="error" aria-live="polite"><span>
                                         </div>
                                     </div>
                                     <div class="form-group row onconnect scale-in-ver-top">

src/js/components/srform.js

@@ -290,8 +290,44 @@ export function connectToServer(url) {
     start();
 }
 
+function UrlValidation() {
+    const urlElement = document.getElementById("inputUrl");
+    const errorElement = urlElement.nextElementSibling;
+
+    if (AppCommon.IsValidUrl(urlElement.value)) {
+        errorElement.innerText = "";
+        errorElement.className = "error";
+        return true;
+    } else {
+            errorElement.innerText = "Invalid Url";
+            errorElement.className = 'error active';
+            return false;
+    }
+}
+
+function TextboxValidation(element, errorMessage) {
+    const errorElement = element.nextElementSibling;
+
+    if(!!element.value) {
+        errorElement.innerText = "";
+        errorElement.className = "error";
+        return true;
+    } else {
+            errorElement.innerText = errorMessage;
+            errorElement.className = 'error active';
+            return false;
+    }
+}
+
+
 export function OnConnect() {
 
+    //Add validation
+    debugger;
+    if(!UrlValidation()) {
+        return;
+    }
+
     var isAdvanceView = !window.appLogic.GetCurrentView();
     if (isAdvanceView) {
         SetConnectionProtocol();
@@ -374,7 +410,13 @@ export function Disconnect() {
 
 export function SendPayload() {
 
-    var methodName = document.getElementById("inputServerMethod").value;
+    const methodNameElement = document.getElementById("inputServerMethod");
+    var methodName = methodNameElement.value;
+    debugger;
+    if(!TextboxValidation(methodNameElement, "Please enter the Hub method name")) {
+        return false;
+    }
+
     var methodArguments = new Array();
 
     methodArguments = ReadAndFormatArguments();