javascript - Not trigger form validation on button click - Stack Overflow

admin管理员组

文章数量:1417662

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="customeranisation" 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>

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="customeranisation" 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>

• javascript
• jquery
• html
• angularjs
• validation

Share Improve this question Follow edited Jan 22, 2017 at 8:46 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jan 22, 2017 at 8:41 Ela BuwaEla Buwa 1,70433 gold badges2222 silver badges4646 bronze badges 5

• 1 try to add type="button" to your buttons – Dario Commented Jan 22, 2017 at 8:48
• Also stackoverflow./questions/17452247/… – mplungjan Commented Jan 22, 2017 at 8:49
• Also stackoverflow./questions/25969709/… – mplungjan Commented Jan 22, 2017 at 8:49
• Thanks guys. It worked – Ela Buwa Commented Jan 22, 2017 at 9:55
• This is a great question and distinct from the others referenced (though it may be similar to other questions). All of that html is not helpful though. – llessurt Commented Mar 17, 2023 at 19:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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>

本文标签： javascriptNot trigger form validation on button clickStack Overflow