Я хочу, чтобы оповещения появлялись при нажатии пользователем кнопки, но они появляются заранее

Question

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

 function BankFormValidation() {
        var nameinput = document.getElementById('cname').value;
        if (nameinput == "") {
            alert('Please enter your name');
            document.getElementById('cname').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('cname').style.bordercolor = "green";
        }
        var banknum = document.getElementById('banknum').value;
        if (banknum == "") {
            alert('Please enter your Banking Account Number');
            document.getElementById('banknum').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('banknum').style.bordercolor = "green";
        }
        var emailinput = document.getElementById('email').value;
        if (emailinput == "") {
            alert('Please enter your email');
            document.getElementById('email').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('email').style.bordercolor = "green";
        }
        var addyinput = document.getElementById('address').value;
        if (addyinput == "") {
            alert('Please enter your address');
            document.getElementById('address').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('address').style.borderColor = "green"
        }
        var cityinput = document.getElementById('city').value;
        if (cityinput == "") {
            alert('Please enter your city');
            document.getElementById('city').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('city').style.borderColor = "green"
        }
        var stateinput = document.getElementById('state').value;
        if (stateinput == "") {
            alert('Please enter your state');
            document.getElementById('state').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('state').style.borderColor = "green"
        }
        var zipinput = document.getElementById('zip').value;
        if (zipinput == "") {
            alert('Please enter your zip code');
            document.getElementById('zip').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('zip').style.borderColor = "green"
        }
        var routerinput = document.getElementById('routnum').value;
        if (routerinput == "") {
            alert('Please enter your router number');
            document.getElementById('routnum').style.borderColor = "red";
            return false;
        } else {
            document.getElementById('routnum').style.borderColor = "green"
        }
    }

<div class="row" id="Banking" onsubmit="return BankFormValidation();" onchange="return BankFormValidation();" >
                    <div class="col-50">
                        <label for="cname"><i class="fa fa-user"></i> Company Name</label>
                        <input type="text" id="cname" name="companyname">
                        <label for="email"><i class="fa fa-envelope"></i> Email</label>
                        <input type="text" id="email" name="email">
                        <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                        <input type="text" id="address" name="address">
                        <label for="city"><i class="fa fa-institution"></i> City</label>
                        <input type="text" id="city" name="city">

                        <div class="row">
                            <div class="col-50">
                                <label for="state">State</label>
                                <input type="text" id="state" name="state">
                            </div>
                            <div class="col-50">
                                <label for="zip">Zip</label>
                                <input type="text" id="zip" name="zip">
                            </div>
                        </div>
                    </div>
                    <div class="col-50">
                        <label for="ccnum">Bank Account</label>
                        <input type="text" id="banknum" name="cardnumber">
                    </div>
                    <div class="col-50">
                        <label for="ccnum">Routing Number</label>
                        <input type="text" id="routnum" name="cardnumber">
                    </div>
                    <p>
                        <input type="checkbox" id="autopayment" />
                        <label for="autopayment">Enroll in autopayment</label>
                    </p>
                    <input type="submit" value="Submit payment" class="btn" onclick="BankFormValidation()">
                </div>

Answer 1

Вам не нужно onchange = "return BankFormValidation ();" часть, только

onsubmit="BankFormValidation();"

Answer 2

Удалите этот onsubmit="return BankFormValidation();" onchange="return BankFormValidation();" из тега DIV.

Answer 3

Вам необходимо удалить onchange=... из вашей формы.

Как этот код:)

<div class="row" id="Banking" onsubmit="return BankFormValidation();">
  ...
</div>

См. Демонстрацию ниже

function BankFormValidation() {
  var nameinput = document.getElementById('cname').value;
  if (nameinput == "") {
    alert('Please enter your name');
    document.getElementById('cname').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('cname').style.bordercolor = "green";
  }
  var banknum = document.getElementById('banknum').value;
  if (banknum == "") {
    alert('Please enter your Banking Account Number');
    document.getElementById('banknum').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('banknum').style.bordercolor = "green";
  }
  var emailinput = document.getElementById('email').value;
  if (emailinput == "") {
    alert('Please enter your email');
    document.getElementById('email').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('email').style.bordercolor = "green";
  }
  var addyinput = document.getElementById('address').value;
  if (addyinput == "") {
    alert('Please enter your address');
    document.getElementById('address').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('address').style.borderColor = "green"
  }
  var cityinput = document.getElementById('city').value;
  if (cityinput == "") {
    alert('Please enter your city');
    document.getElementById('city').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('city').style.borderColor = "green"
  }
  var stateinput = document.getElementById('state').value;
  if (stateinput == "") {
    alert('Please enter your state');
    document.getElementById('state').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('state').style.borderColor = "green"
  }
  var zipinput = document.getElementById('zip').value;
  if (zipinput == "") {
    alert('Please enter your zip code');
    document.getElementById('zip').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('zip').style.borderColor = "green"
  }
  var routerinput = document.getElementById('routnum').value;
  if (routerinput == "") {
    alert('Please enter your router number');
    document.getElementById('routnum').style.borderColor = "red";
    return false;
  } else {
    document.getElementById('routnum').style.borderColor = "green"
  }
}

<div class="row" id="Banking" onsubmit="return BankFormValidation();">
  <div class="col-50">
    <label for="cname"><i class="fa fa-user"></i> Company Name</label>
    <input type="text" id="cname" name="companyname">
    <label for="email"><i class="fa fa-envelope"></i> Email</label>
    <input type="text" id="email" name="email">
    <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
    <input type="text" id="address" name="address">
    <label for="city"><i class="fa fa-institution"></i> City</label>
    <input type="text" id="city" name="city">

    <div class="row">
      <div class="col-50">
        <label for="state">State</label>
        <input type="text" id="state" name="state">
      </div>
      <div class="col-50">
        <label for="zip">Zip</label>
        <input type="text" id="zip" name="zip">
      </div>
    </div>
  </div>
  <div class="col-50">
    <label for="ccnum">Bank Account</label>
    <input type="text" id="banknum" name="cardnumber">
  </div>
  <div class="col-50">
    <label for="ccnum">Routing Number</label>
    <input type="text" id="routnum" name="cardnumber">
  </div>
  <p>
    <input type="checkbox" id="autopayment" />
    <label for="autopayment">Enroll in autopayment</label>
  </p>
  <input type="submit" value="Submit payment" class="btn" onclick="BankFormValidation()">
</div>