0

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>
Hamza ÜNSAL
  • 81
  • 1
  • 2
  • 5

0 Answers0