javascript form not validating fields

I’m trying to validate a form via javascript onSubmit, then run the php captcha verfication and email send action. The problem is that every time I try to check the fields, I can see just one of them highlited with my CSS classes (seems to be related to the ‘return false;’ which blocks me).

Anyone has a clue?

Here’s my HTML form code (you can see it working here: https://jsfiddle.net/xfmsLa95/2/ ):

<form id="contact-form" class="contact" name="contact-form" method="POST" onsubmit="return checkInputs()" action="indexen.php">
                    <div class="fields">
                        <div class="field name">
                            <input type="text" name="name" id="name" placeholder="Name">
                            <i class="fas fa-check-circle"></i>
                            <i class="fas fa-exclamation-circle"></i>
                            <small>Error Message</small>
                        </div>
                        <div class="field email">
                            <input type="text" name="email" id="email" placeholder="Email">
                            <i class="fas fa-check-circle"></i>
                            <i class="fas fa-exclamation-circle"></i>
                            <small>Error Message</small>
                        </div>
                    </div>
                    <div class="field">
                        <input type="text" name="subject" id="subject" placeholder="Subject">
                        <i class="fas fa-check-circle"></i>
                        <i class="fas fa-exclamation-circle"></i>
                        <small>Error Message</small>
                    </div>
                    <div class="field textarea">
                        <textarea name="message" id="message" cols="30" rows="10" placeholder="Message..."></textarea>
                        <i class="fas fa-check-circle"></i>
                        <i class="fas fa-exclamation-circle"></i>
                        <small>Error Message</small>
                    </div>
                    <div class="button-area">
                    <button type="submit" name="submit">Submit</button>
                    </div>  
                </form>

And this is my validator.js file:

const username = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const msg = document.getElementById('message');

function checkInputs() {

    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const subjectValue = subject.value.trim();
    const msgValue = msg.value.trim();

    if(usernameValue === '') {
        setErrorForUser(username, 'Name cannot be blank');
        return false;
    }
    else{
        setSuccessForUser(username);
    }

    if(emailValue === '') {
        setErrorForEmail(email, 'Email cannot be blank');
        return false;
    }

    else if(!isEmail(emailValue)){
        setErrorForEmail(email, 'Invalid email');
        return false;
    }

    else {
        setSuccessForEmail(email);
    }
    
    if(subjectValue === '') {
        setErrorForSubject(subject, 'Subject cannot be blank');
        return false;
    }

    else{
        setSuccessForSubject(subject);
    }

    if(msgValue === '') {
        setErrorForMsg(msg, 'Message cannot be blank');
        return false;
    }

    else{
        setSuccessForMsg(msg);
    }

    return true;

}

function setErrorForUser(input, message) {

    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field error name';
}

function setSuccessForUser(input) {

    const formControl = input.parentElement;

    formControl.className = 'field name success';
}

function setErrorForEmail(input, message) {
    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field email error';
}

function setSuccessForEmail(input) {

    const formControl = input.parentElement;

    formControl.className = 'field email success';
}

function setErrorForMsg(element, message) {

    const formControl = element.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field textarea error';
}

function setSuccessForMsg(element) {

    const formControl = element.parentElement;

    formControl.className = 'field textarea success';
}


function setErrorForSubject(input, message) {

    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field error';
}

function setSuccessForSubject(input) {

    const formControl = input.parentElement;

    formControl.className = 'field success';
}

function isEmail(email) {
    return /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/.test(email);
}

PHP is working.

I’m adding some pictures to refer this. This is what I get:

error

But I want to get something like this:

example

To validate field per field like this:

validation

Thanks in advance,

Answer

Try this in validator.js

const username = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const msg = document.getElementById('message');

function checkInputs() {
    let isValid = true;
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const subjectValue = subject.value.trim();
    const msgValue = msg.value.trim();

    if(usernameValue === '') {
        setErrorForUser(username, 'Name cannot be blank');
        isValid = false;
    }
    else{
        setSuccessForUser(username);
    }

    if(emailValue === '') {
        setErrorForEmail(email, 'Email cannot be blank');
        isValid = false;
    }

    else if(!isEmail(emailValue)){
        setErrorForEmail(email, 'Invalid email');
        isValid = false;
    }

    else {
        setSuccessForEmail(email);
    }
    
    if(subjectValue === '') {
        setErrorForSubject(subject, 'Subject cannot be blank');
        isValid = false;
    }

    else{
        setSuccessForSubject(subject);
    }

    if(msgValue === '') {
        setErrorForMsg(msg, 'Message cannot be blank');
        isValid = false;
    }

    else{
        setSuccessForMsg(msg);
    }

    return isValid;

}

function setErrorForUser(input, message) {

    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field error name';
}

function setSuccessForUser(input) {

    const formControl = input.parentElement;

    formControl.className = 'field name success';
}

function setErrorForEmail(input, message) {
    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field email error';
}

function setSuccessForEmail(input) {

    const formControl = input.parentElement;

    formControl.className = 'field email success';
}

function setErrorForMsg(element, message) {

    const formControl = element.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field textarea error';
}

function setSuccessForMsg(element) {

    const formControl = element.parentElement;

    formControl.className = 'field textarea success';
}


function setErrorForSubject(input, message) {

    const formControl = input.parentElement;
    
    const small = formControl.querySelector('small');

    small.innerText = message;

    formControl.className = 'field error';
}

function setSuccessForSubject(input) {

    const formControl = input.parentElement;

    formControl.className = 'field success';
}

function isEmail(email) {
    return /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/.test(email);
}

What I’ve done here is declared a variable called isValid and set it to true, and whenever the user puts something invalid in the filed it will change isValid to false, and at the very end of the function, it will return isValid.

Let’s say you put a username to password wrong,

if(usernameValue === '') {
    setErrorForUser(username, 'Name cannot be blank');
    isValid = false;
}

the above code runs, and isValid is now false. and when the function is called, it will return isValid, which is false.

Now, let’s say you put everything correctly, then isValid is never assigned false. Because isValid is by default true that means it will return true meaning everything is valid