initial commit

resources/js/Validation/useFormValidation.js

@@ -0,0 +1,77 @@
+import { reactive } from "@vue/reactivity";
+import useValidators from './validators'
+
+
+const errors = reactive({});
+const errorMessage = reactive({});
+
+
+export default function useFormValidation() {
+
+
+    const { isEmpty, minLength, isEmail, isNum,isInt,maxLength } = useValidators();
+
+    const validateNameField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue, 4)
+    }
+
+    const validateEmailField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : isEmail(fieldName, fieldValue)
+    }
+
+    const validatePhoneField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : isNum(fieldName, fieldValue)
+    }
+
+    const validatePasswordField = (fieldName, fieldValue) => {
+        errors[fieldName] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue, 8)
+    }
+
+    const validate = (rules,messages,fieldName, fieldValue) => {
+        let container = {}
+        container["required"] = isEmpty(fieldName,fieldValue)
+        container["email"] = !fieldValue ? isEmpty(fieldName, fieldValue) : isEmail(fieldName, fieldValue)
+        container["password"] = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue,6)
+        container["integer"] = !fieldValue ? isEmpty(fieldName, fieldValue) : isInt(fieldName, fieldValue)
+
+        for (let i in rules){
+            errors[fieldName] = "";
+            let value = rules[i];
+            if(container[value]){
+                errors[fieldName] = container[value];
+                break;
+            }else {
+
+                let splited = value.split(':')
+                if (splited.length == 2) {
+                    container[value] = dyanamicValidation(splited, fieldValue, fieldName)
+                    if(container[value]){
+                        errors[fieldName] = container[value];
+                        break;
+                    }
+                }
+
+            }
+        }
+
+    }
+
+    const dyanamicValidation = (splited,fieldValue,fieldName) => {
+        let result = "";
+        switch (splited[0]){
+            case "min":
+                result = !fieldValue ? isEmpty(fieldName, fieldValue) : minLength(fieldName, fieldValue,splited[1])
+                break;
+            case "max":
+                result = !fieldValue ? isEmpty(fieldName, fieldValue) : maxLength(fieldName, fieldValue,splited[1])
+                break;
+            default:
+                break
+        }
+
+        return result;
+    }
+
+
+    return { errors,validate}
+}

resources/js/Validation/useSubmitButtonState.js

@@ -0,0 +1,18 @@
+import { computed } from "vue";
+
+export default function useSubmitButtonState(user, errors) {
+
+    const isButtonDisabled = computed(() => {
+        let disabled = true;
+        for (let prop in user) {
+            if (!user[prop] || errors[prop]) {
+                disabled = true;
+                break;
+            }
+            disabled = false;
+        }
+        return disabled;
+    });
+
+    return { isButtonDisabled }
+}

resources/js/Validation/validators.js

@@ -0,0 +1,32 @@
+
+export default function useValidators() {
+
+    const isEmpty = (fieldName, fieldValue) => {
+        return !fieldValue ? `The ${fieldName} is required`:"";
+    }
+
+    const minLength = (fieldName, fieldValue, min) => {
+        return fieldValue.length < min ? `The ${fieldName} field must be at least ${min} characters long` : "";
+    }
+
+    const maxLength = (fieldName, fieldValue, max) => {
+        return fieldValue.length > max ? `The ${fieldName} cannot be greater than ${max} characters long` : "";
+    }
+
+    const isEmail = (fieldName, fieldValue) => {
+        let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return !re.test(fieldValue) ? "The input is not a valid " + fieldName + " address" : "";
+    }
+
+    const isNum = (fieldName, fieldValue) => {
+        let isNum = /^\d+$/.test(fieldValue);
+        return !isNum ? "The " + fieldName + " field only have numbers" : "";
+    }
+
+    const isInt = (fieldName, fieldValue) => {
+        let test = /^\d+$/.test(fieldValue);
+        return !test ? "The " + fieldName + " must be integer" : "";
+    }
+
+    return { isEmpty, minLength, isEmail, isNum,isInt,maxLength}
+}