Question

我有一个由两个按钮组成的表单。他们都没有提交＆＃34;提交＆＃34;声明类型。

我的问题是在按钮按钮单击期间触发表单验证，因为我希望仅在一次特定按钮上进行验证。这可以实现吗？

以下是我的代码。

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

Answer 1

将<button>I submit by default</button> <button type="button">I don't submit</button> <button type="submit">I do</button>添加到按钮：

{{1}}

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

1 个答案: