我希望在用户单击按钮时出现警报，但它们会事先出现

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=...。

喜欢这个代码:)

<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>

Answer 2

你不需要 onchange="return BankFormValidation();" 部分，只需要

onsubmit="BankFormValidation();"

Answer 3

从 DIV 标签中删除此 onsubmit="return BankFormValidation();" onchange="return BankFormValidation();"。

我希望在用户单击按钮时出现警报，但它们会事先出现

I want alerts to appear when user clicks button, but they appear beforehand

javascript

alert