Проверка формы не работает для поля ввода имени

Question

Я пытаюсь изменить цвет границы поля ввода для моего имени на красный при отображении сообщения под ним, когда значение равно "". Я делаю все это в JavaScript. Однако когда я его проверяю, ничего не происходит. Я проверил консоль, ничего не сломано. Было интересно, может ли кто-нибудь помочь мне и посмотреть, где моя ошибка.

<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
    <h1 style="text-align: center">Billing Address</h1>
    <div class="row">
        <label for="fname"><i class="fa fa-user"></i> Full Name</label>
        <input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
        <label for="email"><i class="fa fa-envelope"></i> Email</label>
        <input type="text" id="email" name="email" placeholder="john@example.com">
        <label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
        <input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
        <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
        <input type="text" id="address" name="address" placeholder="542 W. 15th Street">
        <label for="city"><i class="fa fa-institution"></i> City</label>
        <input type="text" id="city" name="city" placeholder="New York">


        <div class="col-50">
            <label for="state">State</label>
            <input type="text" id="state" name="state" placeholder="NY">
        </div>
        <div class="col-50">
            <label for="zip">Zip</label>
            <input type="text" id="zip" name="zip" placeholder="10001">
        </div>

    </div>
</form>
<button class="fa orange btn" type="submit" id="customerBtn">Next</button>

<script>
 function customerFormValidation() {
        reason = "";
        reason += validateName(customer_form.firstname);

        console.log(reason);
        if (reason.length > 0) {
            return false;
        } else {
            return false;
        }
    }

    function validateName(firstname) {
        var error = "";
        if (firstname.value == "") {
            document.getElementById("firstname").style.display = "block";
            document.getElementById("firstname").innerText = "Please enter your name";
            document.getElementById("firstname").style.borderColor = "red";
            document.getElementById("firstname").focus();
        } else {
            firstname.style.background = 'White';
            document.getElementById('firstname').innerHTML = "";
        }
        return error;
    }
    
</script>

Answer 1

Проблема в том, что ваша кнопка submit находится за пределами вашей формы, поэтому она не может вызвать событие отправки формы.

Если вы поместите кнопку внутри формы, она сработает.

<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
    <h1 style="text-align: center">Billing Address</h1>
    <div class="row">
        <label for="fname"><i class="fa fa-user"></i> Full Name</label>
        <input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
        <label for="email"><i class="fa fa-envelope"></i> Email</label>
        <input type="text" id="email" name="email" placeholder="john@example.com">
        <label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
        <input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
        <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
        <input type="text" id="address" name="address" placeholder="542 W. 15th Street">
        <label for="city"><i class="fa fa-institution"></i> City</label>
        <input type="text" id="city" name="city" placeholder="New York">


        <div class="col-50">
            <label for="state">State</label>
            <input type="text" id="state" name="state" placeholder="NY">
        </div>
        <div class="col-50">
            <label for="zip">Zip</label>
            <input type="text" id="zip" name="zip" placeholder="10001">
        </div>

    </div>
    <button class="fa orange btn" type="submit" id="customerBtn">Next</button>
</form>


<script>
 function customerFormValidation() {
        reason = "";
        reason += validateName(customer_form.firstname);

        console.log(reason);
        if (reason.length > 0) {
            return false;
        } else {
            return false;
        }
    }

    function validateName(firstname) {
        var error = "";
        if (firstname.value == "") {
            document.getElementById("firstname").style.display = "block";
            document.getElementById("firstname").innerText = "Please enter your name";
            document.getElementById("firstname").style.borderColor = "red";
            document.getElementById("firstname").focus();
        } else {
            firstname.style.background = 'White';
            document.getElementById('firstname').innerHTML = "";
        }
        return error;
    }
    
</script>

С уважением.