Your solution and example is very static and not dynamic.
to make it dynamic i would suggest to use after submitting the form event.currentTarget.elements
with event.currentTarget.elements you will get all the formElements as object
and based on data attribute validation (for example) i would set the validation type. Maybe better is to create a js array of object for your form. On each item you can set the validation type. This is what you can use for validation for the field and form
Thanks @rkallan
for writing this comment!
Yes, the solution is very static, intentionally. This tutorialβs target audience are the beginners, and I think they get the hang of how it works more easil if the validation is static and not dynamic. Probably would worth to create and advanced form validation tutorial too π€
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);
Not sure we need such as your extravagant example. I think the OP was trying to teach it at its basic level.
I would rather applaud him for being basic and simple.
Your solution and example is very static and not dynamic.
to make it dynamic i would suggest to use after submitting the form
event.currentTarget.elements
with
event.currentTarget.elements
you will get all the formElements as objectand based on data attribute validation (for example) i would set the validation type. Maybe better is to create a js array of object for your form. On each item you can set the validation type. This is what you can use for validation for the field and form
If you want to have a example let me know
Thanks @rkallan for writing this comment!
Yes, the solution is very static, intentionally. This tutorialβs target audience are the beginners, and I think they get the hang of how it works more easil if the validation is static and not dynamic. Probably would worth to create and advanced form validation tutorial too π€
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 !!
Not sure we need such as your extravagant example. I think the OP was trying to teach it at its basic level.
I would rather applaud him for being basic and simple.
The OP replayed and explained it why he used the static way. I can agree with the arguments