How to prevent form submit when clicking on button in angularjs?

Question

Hi i am developing web application in angularjs. I have designed one form with some textboxes and multi select dropodwn. I used below link to put up multi select dropodwn.

http://embed.plnkr.co/xWvfWYjaW7TThKZONkv5/

Below is my multi select dropodwn.

<multiselect class="" multiple="true"
    ng-model="selectedCar"
    options="c.Location for c in locations"
    change="selected()" name="location" ng-required="true">
</multiselect>

Also i have some textboxes as below.

<div>
    <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
    <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
    </span>
</div>
<input class="with-icon" type="text" name="IDCopyNo" ng-model="IDCopyNo" required my-maxlength="32">

Below is my full code.

<form name="form2" novalidate >
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.location.$invalid)  || (form2.location.$invalid && form2.location.$dirty))}">
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.location.$dirty">Select Location</span>
    </div>
    <multiselect class="" multiple="true" ng-model="selectedCar" options="c.Location for c in locations" change="selected()" name="location" ng-required="true">
    </multiselect>
  </div>
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.IDCopyNo.$invalid )|| (form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty))}">
    <label class="inputblock-label" ng-show="user.IDCopyNo">{{ 'IDCopyNo' | translate }}</label>
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
       <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
      </span>
    </div>
    <input class="with-icon" type="text" name="IDCopyNo" placeholder="{{ 'IDCopyNo' | translate }}" ng-model="IDCopyNo" required my-maxlength="32">
  </div>
  <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveDetail()">
</form>

Now the problem is whenever i do not enter value in my textbox and if i click on multi select dropodwn then my validation firing for textbox. Validation supposed to fire when i click on submit button. May i know how can i fix this? Thank you.

Can you add your full example? Hard to tell from the plunker provided... — Kyle
– Kyle, Commented Aug 14, 2017 at 12:36
Possible duplicate of Validate form field only on submit or user input — Nelson Yeung
– Nelson Yeung, Commented Aug 14, 2017 at 12:43
Hi William. I changed as per Validate form field only on submit or user input and no luck — Niranjan Godbole
– Niranjan Godbole, Commented Aug 14, 2017 at 12:53

Lewis Browne · Accepted Answer · 2017-08-14 12:44:55Z

0

If you were using jquery then you would use prevent default to achieve exactly what you are after:

jQuery("a").click(function(event){
    event.preventDefault();
});

For angular As far as i am aware, the ng-click directive creates the $event variable which is available on the current scope. This can be referenced to a Java Script event which can then be used to call stopPropagation.

<button class="btn" ng-click="$event.stopPropagation();">
    Delete
</button>

edited Aug 14, 2017 at 12:44

answered Aug 14, 2017 at 12:36

Lewis Browne

9307 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Niranjan Godbole Over a year ago

Thank you. I am not using jquery. I am using Angularjs

Niranjan Godbole Over a year ago

In browser i saw below code. <button class="btn error" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}"> <span class="pull-left ng-binding">Select</span> <span class="caret pull-right"></span> </button>

Niranjan Godbole Over a year ago

There is already function on ng-click="toggleSelect()" so where should i write the code you provided?

Lewis Browne Over a year ago

Put it after toggleSelect() like the following: <button class="btn error" ng-click="toggleSelect(); $event.stopPropagation();"

Collectives™ on Stack Overflow

How to prevent form submit when clicking on button in angularjs?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related