单击按钮时不会触发表单验证

Posted 2023-05-09

【中文标题】单击按钮时不会触发表单验证

【英文标题】：Not trigger form validation on button click

【发布时间】：2017-06-06 22:27:02

【问题描述】：

我有一个由两个按钮组成的表单。它们都没有类型中的“提交”声明。

我的问题是表单验证是在两个按钮按钮单击期间触发的，因为我希望验证只发生在一个特定的按钮单击时。 这可以实现吗？

下面是我的代码。

<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
  <div class="panel panel-default" ng-init="init()">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6">
          <fieldset>
            <legend class="text-semibold">PERSONAL INFO</legend>
            <div class="form-group">
              <label class="col-lg-3 control-label">Name</label>
              <div class="col-lg-9">
                <input type="text" ng-model="customer.name" name="username" class="form-control" required/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">E-Mail</label>
              <div class="col-lg-9">
                <input type="email" ng-model="customer.email" name="email" class="form-control" required />
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Mobile Number</label>
              <div class="col-lg-9">
                <input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".9," required title="9 characters minimum" />
              </div>
            </div>
            <legend class="text-semibold">ADDRESS</legend>
            <div class="form-group">
              <label class="col-lg-3 control-label">Organisation Name</label>
              <div class="col-lg-9">
                <input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".0|.5," title="Either 0 OR (5 chars minimum)" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Floor</label>
              <div class="col-lg-9">
                <input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".0|.1," title="Either 0 OR (1 chars minimum)" />
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Line 1</label>
              <div class="col-lg-9">
                <input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Line 2</label>
              <div class="col-lg-9">
                <input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-lg-3 control-label">Postcode</label>
              <div class="col-lg-9">
                <input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="col-md-6">
          <fieldset>
            <legend class="text-semibold">ITEMS</legend>
            <div class="container" ng-repeat="item in items">
              <div class="row">
                <div class="col-md-1 col-xs-3 col-sm-2">
                  <a href="#" class="thumbnail">
                    <img ng-src=" item.thumbnail ">
                  </a>
                </div>
                <div style="font-size:15px;" class="col-md-6"><span style="color:coral;"> item.qty  x </span> item.title </div>
                <div style="font-size:13px;" class="col-md-6"> item.description </div>
                <div class="col-md-6" style="padding-top:5px; font-size: 15px;">$  item.line_total </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend class="text-semibold">CHECK OUT</legend>
          </fieldset>
          <div class="form-group">
            <label class="col-lg-3 control-label">Vouchercode</label>
            <div class="col-lg-6">
              <input type="text" ng-model="voucher" name="voucher" class="form-control" />
            </div>
            <div class="col-lg-3">
              <button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Special Notes</label>
            <div class="col-lg-9">
              <textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-lg-3 control-label">Total</label>
            <div class="col-lg-9">NZ total | currency</div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

【问题讨论】：

尝试将type="button" 添加到您的按钮

还有***.com/questions/17452247/…

还有***.com/questions/25969709/…

谢谢大家。成功了

【参考方案1】：

在按钮上添加type：

<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>