javascript - 我希望在用户单击按钮时显示警报，但警报会事先显示

我创建了一个表单，并通过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>

最佳答案

您不需要onchange =“ return BankFormValidation（）;”仅一部分

onsubmit="BankFormValidation();"