ボタンのクリックでフォームの検証が行われない

Question

私は2つのボタンからなるフォームを持っています。それらの中には、 "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> 

Answer 1

ボタンにtypeを追加します。

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