javascript - JS Form validation Checkbox IF statement not working

Question

New to JS. I've created a form which the user must enter their name and email before submitting, incorrect input returns with red outline/borders (fields that are incomplete) or green for which are accepted/complete -and also icons from 'Font-awesome'.

Problem: I can't get the red outline around the 'T&Cs checkbox' at the bottom of the form to appear (with the error message) if the user hasn't checked it before submission -basically the same error response that occurs around with Name or Email.

I think there might be a problem with my checkbox IF statement. Can anyone help? Thanks for your help!

HTML, CSS and JS

const form = document.getElementById('contactus_form');
const customerName = document.getElementById('customerName');
const customerCUEmail = document.getElementById('customerCUEmail');
const disclaimerBox = document.getElementById('disclaimerBox');

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

function checkInputs() {
    // trim to remove the whitespaces
    const customerNameValue = customerName.value.trim();
    const customerCUEmailValue = customerCUEmail.value.trim();
    
    if(customerNameValue === '') {
        setErrorFor(customerName, 'Please enter your name');
    } else {
        setSuccessFor(customerName);
    }
    
    if(customerCUEmailValue === '') {
        setErrorFor(customerCUEmail, 'Email cannot be blank');
    } else if (!isEmail(customerCUEmailValue)) {
        setErrorFor(customerCUEmail, 'Not a valid email');
    } else {
        setSuccessFor(customerCUEmail);
    }
  
  if(!disclaimerBox.checked == true){
    setErrorFor(disclaimerBox, 'Please check box and accept our terms and conditions.');
  }else {
    setSuccessFor(disclaimerBox);
  }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'customerCU-form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'customerCU-form-control success';
}
    
function isEmail(customerCUEmail) {
    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(customerCUEmail);
}

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');

* {
    box-sizing: border-box;
}

.customer-contactus-body {
    min-height: 1300px;
    width: 100%;
    background-color: Pink
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px;
}

.customerCU_container {
    background-color: yellow;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 400px;
    max-width: 100%;
}

.customer_contactus_heading_form {
    border-bottom: 1px solid #f0f0f0;
    background-color: #f7f7f7;
    padding: 20px 40px;
}

.customer_contactus_heading_form h2 {
    margin: 0;
}

.contactus_form {
    padding: 30px 40px; 
}

.customerCU-form-control {
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
}

.customerCU-form-control label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight:bold;
}

.customerCU-form-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.customerCU-form-control input:focus {
    outline: 0;
    border-color: #777;
}

.customerCU-form-control.success input {
    border-color: #2ecc71;
}

.customerCU-form-control.error input  {
    border-color: #e74c3c;
}

.customerCU-form-control i {
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 10px;
}

.customerCU-form-control.success i.fa-check-circle {
    color: #2ecc71;
    visibility: visible;
}

.customerCU-form-control.error i.fa-exclamation-circle {
    color: #e74c3c;
    visibility: visible;
}

.customerCU-form-control small {
    color: #e74c3c;
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
}

.customerCU-form-control.error small {
    visibility: visible;
}

label#disclaimer-label {
    margin-left: 10px;
    font-size: 12px;
    width: 612px;
}


.contactus_form button {
    background-color: rgb(31, 136, 229);
    border: 2px solid rgb(128, 128, 128, 0.199);
    border-radius: 4px;
    color: #fff;
    display: block;
    font-family: inherit;
    font-size: 16px;
    padding: 10px;
    margin-top: 20px;
    width: 100%;
    cursor:pointer;
}

.contactus_form button:hover {
  cursor: pointer;
  box-shadow: 1px 1px 1px rgb(25, 60, 173);
}

<div class="customer-contactus-body">
    <div class="customerCU_container">
        <div class="customer_contactus_heading_form">
            <h2>Form</h2>
        </div>
        <form id="contactus_form" class="contactus_form">
            <div class="customerCU-form-control">
                <label for="customerName">Name</label>
                <input type="text" placeholder="John Smith" id="customerName" />
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <small>Error message</small>
            </div>
            <div class="customerCU-form-control">
                <label for="customerName">Email</label>
                <input type="customerCUEmail" placeholder="[email protected]" id="customerCUEmail" />
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <small>Error message</small>
            </div>
           <div class="customerCU-form-control">
                <input class="form-check-input me-1 disclaimerBox" type="checkbox" id="contactus-form-disclaimer"/>
                <label for="customerName" id="disclaimer-label">I agree with the rules set out in the T & C's</label>
             <small>Error message</small>
            </div>
            <button>Submit</button>
        </form>
    </div>
</div>

Answer 1

The input element for you email has the type customerCUEmail:

<input type="customerCUEmail" placeholder="[email protected]" id="customerCUEmail" />

An input type is related to its format (text, number, checkbox, etc.) and it might be because of that. And en input type email already exists and performs some verification for you (source).

Note that error input styling is highly browser dependent. Tests on different browsers. ;)