I'm stuck in Form elements. The rule is ; first char of your password should not be number. It should start with any of letter.
Basicially here is my code ;
I defined all CLASSES ( password[0] element should not be number ) :
const form = document.getElementById('form');
const username = document.getElementById('username');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const name = document.getElementById('name');
const surname = document.getElementById('surname');
const adres = document.getElementById('adres');
Than I get their values.
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
const nameValue = name.value.trim();
const surnameValue = surname.value.trim();
const adresValue = adres.value.trim();
Than when you get success / error final screen
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
} else {
setSuccessFor(username);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password2 cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
if(nameValue === ''){
setErrorFor(name, 'Name cannot be blank');
}else{
setSuccessFor(name)
}
if(surnameValue === ''){
setErrorFor(surname, 'Surname cannot be blank');
}else{
setSuccessFor(surname)
}
if(adresValue === ''){
setErrorFor(adres, 'Address cannot be blank')
}else{
setSuccessFor(adres)
};
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
Final Part here is my form code :
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="UserID" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Vorname</label>
<input type="text" placeholder="Vorname" id="name" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Nachname</label>
<input type="text" placeholder="Nachname" id="surname" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password</label>
<input type="password" placeholder="Password" id="password"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password check</label>
<input type="password" placeholder="Password two" id="password2"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Adress</label>
<input type="text" placeholder="Type Your Address" id="adres" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="country">Country</label><br>
<select id="cars" name="cars">
<option value="austria">Austria</option>
<option value="germany">Germany</option>
<option value="switzerland">Switzerland</option>
<option value="turkey">TURKEY</option>
</select>
</div>
<button>Submit</button>
</form>