constgetType=(value)=>{consttype=Object.prototype.toString.call(value).slice(1,-1).split("");returntype&&type[1].toLowerCase();};constvalidations={isEmpty:({value})=>{constvalueIsType=getType(value);if(valueIsType==="string")return!value.trim().length;if(valueIsType==="array")return!value.length;if(valueIsType==="object")return!Object.keys(value).length;if(valueIsType==="number")returnNumber.isNaN(value);if(valueIsType==="boolean")returnfalse;returntrue;},email:({value})=>{constisEmpty=validations.isEmpty({value});constreturnValue={isValid:false,message:null,};if(isEmpty===true){returnValue.message="Email is required";returnreturnValue;}constpattern=/^(([^<>()[\]\\.,;:\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,}))$/;constisValid=pattern.test(String(value).toLowerCase());if(isValid===false){returnValue.message="Provide a valid email address";}returnValue.isValid=isValid;returnreturnValue;},username:({value})=>{constisEmpty=validations.isEmpty({value});constreturnValue={isValid:!isEmpty,message:null,};if(isEmpty===true){returnValue.message="Username is required";}returnreturnValue;},password:({value})=>{constisEmpty=validations.isEmpty({value});constreturnValue={isValid:false,message:null,};if(isEmpty===true){returnValue.message="Password is required";returnreturnValue;}if(value.length<8){returnValue.message="Password must be at least 8 character.";returnreturnValue;}returnValue.isValid=true;returnreturnValue;},passwordConfirm:({value,valueToMatch})=>{constisEmpty=validations.isEmpty({value});constvalueToMatchIsEmpty=validations.isEmpty(valueToMatch);constreturnValue={isValid:false,message:null,};if(valueToMatchIsEmpty===true){returnreturnValue;}if(isEmpty===true){returnValue.message="Please confirm your password";returnreturnValue;}if(value!==valueToMatch){returnValue.message="Passwords doesn't match";returnreturnValue;}returnValue.isValid=true;returnreturnValue;},};constsetInputControlClassName=({element,isValid=true,message=null})=>{constinputControl=element.parentElement||{};inputControl.classList.toggle("error",!isValid);inputControl.classList.toggle("succes",isValid);consterrorDisplay=inputControl.querySelector(".error")||{};errorDisplay.innerText=message||"";};constonSubmitForm=(event)=>{event.preventDefault();constformObject=event.currentTarget;constformElements=formObject.elements;Array.prototype.slice.call(formElements).forEach((element)=>{const{type,required,dataset}=element;if(["submit","reset","button"].includes(type)||!required)return;constvalidationType=dataset.validation;constvalue=element.value?.trim();constvalueToMatch=validationType==="passwordConfirm"?formElements.password?.value?.trim():null;const{isValid,message}=validations[validationType]({value,valueToMatch});setInputControlClassName({element,isValid,message});});};constformElement=document.querySelector("#form");formElement.addEventListener("submit",onSubmitForm);
I understand your explanation and I can agree about the static validation as a start
But to get the values of your form elements I would suggest to use
event.currentTarget.elements
The 2 functions setError and setSucces I would created as 1 function
The if statements for validation I would created functions. And avoiding if elseif else statements
And return value would be a object
Hi RRKallan,Thanks for explaining this, can you provide real time working example on the same !!
@anil027
Thank you !!