@cocreate/validation 1.3.5 → 1.4.3

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.4.3](https://github.com/CoCreate-app/CoCreate-validation/compare/v1.4.2...v1.4.3) (2021-11-20)
+
+
+### Bug Fixes
+
+* updated script tags and link tags ([d2adf65](https://github.com/CoCreate-app/CoCreate-validation/commit/d2adf6588fa6ec6b78f4a8e13d6a3529e1c736ae))
+
+## [1.4.2](https://github.com/CoCreate-app/CoCreate-validation/compare/v1.4.1...v1.4.2) (2021-11-20)
+
+
+### Bug Fixes
+
+* update dependencies ([785f913](https://github.com/CoCreate-app/CoCreate-validation/commit/785f9135d4939752ed70d47c848a45d4a9baad67))
+
+## [1.4.1](https://github.com/CoCreate-app/CoCreate-validation/compare/v1.4.0...v1.4.1) (2021-11-19)
+
+
+### Bug Fixes
+
+* update dependencies ([621dde6](https://github.com/CoCreate-app/CoCreate-validation/commit/621dde6d78a5a00e34eecc195d66a3738e43a7b3))
+
+# [1.4.0](https://github.com/CoCreate-app/CoCreate-validation/compare/v1.3.5...v1.4.0) (2021-11-19)
+
+
+### Features
+
+* support for required inputs ([6c89b25](https://github.com/CoCreate-app/CoCreate-validation/commit/6c89b25eee80cac4ede435a0c69ebfb8f8ffa0a3))
+
 ## [1.3.5](https://github.com/CoCreate-app/CoCreate-validation/compare/v1.3.4...v1.3.5) (2021-11-18)
 
 

package/docs/index.html

@@ -112,15 +112,7 @@
                 
             </div>				
         </div>
-        <script>
-            var config = {
-                apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
-                securityKey: 'f26baf68-e3a9-45fc-effe-502e47116265',
-                organization_Id: '5de0387b12e200ea63204d6c'
-            }
-        </script>
-    
-        <!--CoCreateJS-->
-        <script src="https://server.cocreate.app/js/CoCreate.min.js"></script>
+		<script src="/apikey.js"></script>
+        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
     </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/validation",
-  "version": "1.3.5",
+  "version": "1.4.3",
   "description": "A simple validation component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "validation",
@@ -61,9 +61,9 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/action": "^1.3.13",
-    "@cocreate/docs": "^1.2.51",
-    "@cocreate/hosting": "^1.2.46",
-    "@cocreate/render": "^1.3.14"
+    "@cocreate/action": "^1.3.15",
+    "@cocreate/docs": "^1.2.53",
+    "@cocreate/hosting": "^1.2.48",
+    "@cocreate/render": "^1.3.16"
   }
 }

package/src/index.js

@@ -7,42 +7,69 @@
 
 /*globals CustomEvent*/
 import action from '@cocreate/action';
-import render from '@cocreate/render';
-import './validations/equalTo.js';
-import './validations/subdomain.js';
+// import render from '@cocreate/render';
+import {matches} from './validations/matches';
+import {required} from './validations/required';
+import {unique} from './validations/unique';
+import {subdomain} from './validations/subdomain';
 
-function  validate(btn) {
+const validations = new Map();
+validations.set('matches', matches);
+validations.set('required', required);
+validations.set('subdomain', subdomain);
+validations.set('unique', unique);
+
+const selectors = '[matches], [required], [unique], [subdomain]';
+
+function validate(btn) {
 	let validateElements;
+	let validateSelectors = [];
+	let failedElements = [];
 	
 	if (btn.actionParams.size != 0){
 		let selector = btn.actionParams.get('validate');
-		validateElements = document.querySelectorAll(`${selector}[unique="false"]`);
+		for (let [validation] of validations){
+			let vSelctor = `${selector}[${validation}]`;
+			validateSelectors.push(vSelctor);
+		}
+		let validSelectors = validateSelectors.join(', ');
+		validateElements = document.querySelectorAll(validSelectors);
 		if (!validateElements.length){
 			let element = document.querySelector(selector);
-			validateElements = element.querySelectorAll('[unique="false"]');
+			if (element)
+				validateElements = element.querySelectorAll(selectors);
 		}
 	} else {
 		let element = btn.closest('form');
-		validateElements = element.querySelectorAll('[unique="false"]');
+		validateElements = element.querySelectorAll(selectors);
 	}
 	
-	if (validateElements.length){
-		render.data({
-			selector: "[template_id='validate']",
-			data: {
-		        type: 'unique',
-		        status: 'failed',
-		        message: 'One or more values are not unique',
-		        selector: '[unique="false"]',
-		        elements: validateElements
-	    	}
-		});
-	} 
-	else {
+	
+	for (let [validation, func] of validations){
+		let elements = [];
+		for (let element of validateElements){
+			// let validationSelectors = element.getAttribute('validate').replace(/ /g, '').split(',');
+			if (element.hasAttribute(validation)){
+				elements.push(element);	
+			}
+		}
+		if (elements.length){
+			let failedEls = func(elements);
+			if (failedEls)
+				failedElements.push(failedEls);
+		}
+	}
+	for (let element of validateElements){
+		let isValid = element.getAttribute('validation');
+		if (isValid == 'false')
+			failedElements.push(element);
+	}
+	
+	if (failedElements.length == 0){
 		document.dispatchEvent(new CustomEvent('validate', {
 			detail: {}
 		}));
-	}
+	} 
 }
 
 action.init({
@@ -53,3 +80,4 @@ action.init({
 	}
 });
 
+export default {validations};

package/src/validations/matches.js

@@ -0,0 +1,55 @@
+import render from '@cocreate/render';
+
+function initMatches(){
+    let elements = document.querySelectorAll('[matches]');
+    for (let element of elements){
+        let targetSelector = element.getAttribute('matches');
+        let target = document.querySelector(targetSelector);
+        element.validations = {matches: target};
+        element.addEventListener('input', validateMatchEvent);
+    }
+}
+
+function validateMatchEvent(e){
+    validateMatch(e.target);
+}
+
+function validateMatch(element){
+    // let element = e.target;
+    let target = element.validations.matches;
+    if (target.value == element.value){
+        target.setAttribute('validation', 'true');
+        element.setAttribute('validation', 'true');
+    }
+    else {
+        target.setAttribute('validation', 'false');
+        element.setAttribute('validation', 'false');
+    }
+}
+
+function matches(elements){
+    let failedElements = [];
+    for (let element of elements) {
+        let isValid = element.getAttribute('validation');
+        if (isValid == 'false'){
+            failedElements.push(element);
+        }
+    }
+    if (failedElements.length){
+		render.data({
+			selector: "[template_id='validate']",
+			data: {
+		        type: 'matches',
+		        status: 'failed',
+		        message: 'One or more values do not match',
+		        selector: '[matches][validation="false"]',
+		        elements: failedElements
+	    	}
+		});
+		return failedElements;
+    }
+}
+
+initMatches();
+
+export {matches};

package/src/validations/required.js

@@ -0,0 +1,30 @@
+// import {validations} from '../index.js';
+import render from '@cocreate/render';
+
+
+export var required = (elements) => {
+    let failedElements = [];
+    for (let element of elements){
+        let value = element.getValue(element);
+        if (value){
+            element.setAttribute('validation', 'true');
+        }
+        else {
+            element.setAttribute('validation', 'false');
+            failedElements.push(element);
+        }
+    }
+    if (failedElements.length){
+		render.data({
+			selector: "[template_id='validate']",
+			data: {
+		        type: 'unique',
+		        status: 'failed',
+		        message: 'One or more required fields are missing values',
+				selector: '[required][validation="false"]',
+		        elements: failedElements
+	    	}
+		});
+		return failedElements;
+    }
+};

package/src/validations/subdomain.js

@@ -1,12 +1,17 @@
-export function subdomain(){
+import render from '@cocreate/render';
+
+function initSubdomain(){
     let elements = document.querySelectorAll('[subdomain]');
     for (let element of elements){
-        element.addEventListener('input', validateSubdomain);
+        element.addEventListener('input', validateSubdomainEvent);
     }
 }
 
-function validateSubdomain(e){
-    let element = e.target;
+function validateSubdomainEvent(e){
+    validateSubdomain(e.target);
+}
+
+function validateSubdomain(element){
     let array = element.getValue(element).split('.').length -1;
     if (array == 2){
         element.setAttribute('validation', 'true');
@@ -16,4 +21,29 @@ function validateSubdomain(e){
     }
 }
 
-subdomain();
+function subdomain(elements){
+    let failedElements = [];
+    for (let element of elements) {
+        let isValid = element.getAttribute('validation');
+        if (isValid == 'false'){
+            failedElements.push(element);
+        }
+    }
+    if (failedElements.length){
+		render.data({
+			selector: "[template_id='validate']",
+			data: {
+		        type: 'subdomain',
+		        status: 'failed',
+		        message: 'Enter a valid subdomain. subdomain can only be one level.',
+		        selector: '[subdomain][validation="false"]',
+		        elements: failedElements
+	    	}
+		});
+		return failedElements;
+    }
+}
+
+initSubdomain();
+
+export {subdomain};

package/src/validations/unique.js

@@ -0,0 +1,33 @@
+import render from '@cocreate/render';
+
+export var unique = (elements) => {
+    let failedElements = [];
+    for (let element of elements){
+        let unique = element.getAttribute('unique');
+        if (unique == 'false'){
+            failedElements.push(element);
+        }
+        // if (unique != 'false'){
+        //     element.setAttribute('validation', 'true');
+        // }
+        // else {
+        //     element.setAttribute('validation', 'false');
+        //     failedElements.push(element);
+        // }
+    }
+    if (failedElements.length){
+		render.data({
+			selector: "[template_id='validate']",
+			data: {
+		        type: 'unique',
+		        status: 'failed',
+		        message: 'One or more values are not unique',
+		        selector: '[unique="false"]',
+		        elements: failedElements
+	    	}
+		});
+		return failedElements;
+    }
+};
+
+// unique();

package/src/validations/equalTo.js

@@ -1,25 +0,0 @@
-export function equalTo(){
-    let elements = document.querySelectorAll('[equal-to]');
-    for (let element of elements){
-        let targetSelector = element.getAttribute('equal-to');
-        let target = document.querySelector(targetSelector);
-        element.validations = {isEqualTo: target};
-        element.addEventListener('input', validateEqual);
-        
-    }
-}
-
-function validateEqual(e){
-    let element = e.target;
-    let target = element.validations.isEqualTo;
-    if (target.value == element.value){
-        target.setAttribute('validation', 'true');
-        element.setAttribute('validation', 'true');
-    }
-    else {
-        target.setAttribute('validation', 'false');
-        element.setAttribute('validation', 'false');
-    }
-}
-
-equalTo();