0

I have made a sign up form with validation in username ,name ,password and confirm password all of validations are working on clicking a submit button but I want the validations on run time like if user is entering a password user should see the validations before even clicking submit button

form.addEventListener('submit', e => {
    e.preventDefault();

    checkInputs();
});

function checkInputs() {
    // trim to remove the whitespaces
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();
    var numbers = /[0-9]/;
    var char = /[!@#$%^&*()+_{}|]/;
    var pwd = /^(?=.*[a-z])/;
    var pwd1 = /^(?=.*[A-Z])/;
    var pwd2 = /^(?=.*[0-9])/;




    if (usernameValue === '') {
        setErrorFor(username, 'Username cannot be blank');
    }
    else {
        if (usernameValue.match(numbers) || usernameValue.match(char)) {

            setErrorFor(username, 'Username can only contain letters');
        } else {
            setSuccessFor(username);
        }
    }

    if (emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Not a valid email');
    } else {
        setSuccessFor(email);
    }

    if (passwordValue === '') {
        setErrorFor(password, 'Password cannot be blank');
    } else if (passwordValue.length < 8) {
        setErrorFor(password, 'Password must a minimum of 8 characters');
    }
    else if (pwd.test(passwordValue) == false) {
        setErrorFor(password,'Password must have 1 lowerCase letter');
        
    }
    
    else if (pwd1.test(passwordValue) == false) {
        setErrorFor(password,'Password must have 1 UpperCase letter');
        
    }
    else if (pwd2.test(passwordValue) == false) {
        setErrorFor(password,'Password must have 1 Number');
        
    }

    else {
        setSuccessFor(password);
    }

    if (password2Value === '') {
        setErrorFor(password2, 'Password2 cannot be blank');

    }
    else if (passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords does not match');
    } else {
        setSuccessFor(password2);
    }
}

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';
}

please suggest me something how can I make it work on runtime

Muhammad Usman Azhar
  • 1
  • 2
    Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission). If not, there are many many posts on [so] and on the web about how to do this! – Inigo Dec 10 '21 at 07:26

1 Answers1

0

To check wheather a certain field is valid or not at the time of user input

call your function using oninput event like oninput="return checkInputs()" on input field.

Rajat Singh
  • 41
  • 3