Zacznijmy od tego żebyś do każdego wymaganego inputu dodał atrybuta data-error i pobrał to tak:
var form = document.querySelector("#myForm"),
fields = form.querySelectorAll("[data-error]");
później stwórz sobie funkcje odpowiedzialne za walidację np.
function isNotEmpty(field){
return field.value!=="";
}
później stwórz funkcję, która wyświetli komunikaty o błędach np. tak:
function showErrors(errors){
var ul = document.querySelector("ul.errors");
if(!ul){
ul = document.createElement("ul");
ul.classList.add("errors");
}
ul.innerHTML = "";
errors.forEach(function(error){
var li = document.createElement("li");
li.textContent = error;
ul.appendChild(li);
});
form.parentNode.insertBefore(ul, form);
}
następnie przypisujesz zdarzenie submit i robisz coś takiego:
form.addEventListener("submit", function(e){
e.preventDefault();
var errors = [];
for(var i=0; i<fields.length; i++){
var field = fields[i],
isValid = true;
if(field.type === "text"){
isValid = isNotEmpty(field);
}
if(field.type=="select-one"){
isValid = isNotEmpty(field);
}
tu możesz dać więcej typów do spraawdzenia i całość kończysz tak:
if(!isValid){
field.classList.add("error");
errors.push(field.dataset.error);
} else{
field.classList.remove("error");
}
}
if(errors.length){
showErrors(errors);
} else{
form.submit();
}
}, false);
na koniec łączysz wszystko w całość i mi stawiasz piwo :)
a i bym zapomniał, inputy w formularzu mają wyglądać tak:
<input type="text" data-error="Podaj imię i nazwisko">