Koden funkar ej
Detta är lite kod som jag har fått problem med, jag vet inte om jag har missat något men det funkar inte, skulle någon kunna hjälpa mig för att förstå vad jag har gjort fel
Jag föresöker skapa en realtime validation till mitt formulär
const validationForm = formSelector =>{
const formElement = document.querySelector(formSelector);
const validationOptions = [
{
attribute: 'required',
isValid: input => input.value.trim() !== '',
errorMessage: (input, label) => '{lable.textContent} is required'
}
];
const validateAllFormGroup = formDiv => {
const label = formGroup.querySelector('label');
const input = formGroup.querySelector('input');
const errorContainer = formGroup.querySelector('.error');
const errorIcon = formGroup.querySelector('.error-icon');
const successIcon = formGroup.querySelector('.success-icon');
for(const option of validationOptions){
if(input.hasAttribut(option.attribute) && !option.isValis(input)){
errorContainer.textContent = option.errorMessage(input, label);
}
}
};
formElement.setAttribute('novalidate', '');
formElement.addEventListener('submit', event => {
event.preventDefault();
validateAllFormGroups(formElement);
});
const validateAllFormGroups = formToValidate => {
const formGroups = Array.form(formToValidate.querySelectorAll('.formDiv'));
formGroups.forEach(formDiv =>{
validateSingleFormGroup(formGroup);
});
};
}
validationForm('#medelandeForm');
mvh
Utöver ditt javascript har du en del html. Det vore lättare att testa koden om man skulle inte behöva hitta på html delen.
Och du säger inte vad koden gör som inte stämmer överens med dina förväntningar.
T.ex. vad ser du i errorContainern, osv.
----------
Ett problem jag ser på en gång är denna felstavade rad:
errorMessage: (input, label) => '{lable.textContent} is required'
----------
Denna forEach ser också konstigt ut:
formGroups.forEach(formDiv =>{
validateSingleFormGroup(formGroup);
});
Ville du inte skriva formDiv i stället för formGroup? (eller tvärtom)
Utöver det som Macilaci skriver så kanske följande är fel också
!option.isValis
Javascript är ett kraftfullt språk men som alla icke-deklarativa språk så får man inte så mycket hjälp av utvecklingsmiljö när man utvecklar. För deklarativa språk så har utvecklingsmiljö och kompilator bättre förutsättningar att fånga fel på ett tidigt stadium. Någon felutskrift brukar man få och det kan man komma en bit på vägen med. Jag brukar rekommendera att om man inte är väldigt erfaren så skriver man en liten del, testar, fyller på med mer kod, testar .. osv så kan man hitta felen tidigare.