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

Question

I have a form which consists of two buttons. None of them have the "submit" declaration in type.

My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click. Can this be achieved?

Below is my code.

<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

Add type to the button:

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