Front end validation in step-form
-
Hi there, I’m building a step form. I already managed to have multiple .tab’s in my <form> element. and it is possible to navigate to the next/prev tab. But validation is working well yet.
I grab per tab all inputs like
function validateForm(){ var x, y, i; x = document.getElementsByClassName("tab"); y = x[currentIndex].getElementsByTagName("input"); for (i = 0; i < y.length; i++) { validateField(y[i]); } if (valid) { document.getElementsByClassName("tab")[currentIndex].classList.add("finish"); } return valid; // return the valid status } function validateField(input){ if(isEmptyOrSpaces(input.value) && input.hasAttribute('required')){ console.log(input.name + ' is required'); input.classList.add('invalid'); valid = false; return valid; } input.classList.remove('invalid'); valid = true; return valid; } function isEmptyOrSpaces(str){ return str === null || str.match(/^ *$/) !== null; }
This mostly works for normal text inputs. But I’m getting into trouble when using radio’s/checkboxes. When you loop through all inputs per tab, it still sees any checkbox as a seperate input. and it will validate all of them, which always returns something good, because they already have an assigned value. I also tried using the FormData class in JS, but that apparently grabs all inputs from the entire <form> which isn’t good for validation per step.
Does anyone have a solution?
- The topic ‘Front end validation in step-form’ is closed to new replies.