不要在按钮点击时触发表单验证。

Question

我有一个表单，包含两个按钮。它们的"type"属性中都没有声明为"submit"。

我的问题是，在点击这两个按钮时都会触发表单验证，而我希望仅在特定按钮点击时进行验证。

请问是否可以实现这一点？

以下是我的代码：

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

- Ela Buwa

---

尝试将type="button"添加到你的按钮中。 - Dario

同时，https://dev59.com/qmQm5IYBdhLWcg3wowSw - mplungjan

同时，https://dev59.com/TIPba4cB1Zd3GeqPupsE 这个链接是关于如何在AngularJS中实现表单验证而不使用提交按钮的问题。 - mplungjan

谢谢大家。它起作用了。 - Ela Buwa

这是一个很好的问题，与其他提到的问题不同（尽管它可能与其他问题相似）。虽然所有的HTML代码都没有帮助。 - llessurt

Answer 1

在按钮中添加type属性：

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

- Nir Tzezana