CODEWITHSUNDEEP
javascripthtmlangularjs
aftab
aftab

Reputation: 545

How to prevent submit form if condition is true on Div?

How to prevent form to submit if condition is true , please see my implementation i dont want to submit form until field has value.How to achieve the task using AngularJS ?

form.html

<div class="panel panel-default" ng-keypress="entityClosure($event)">
  <div class="panel-heading">
    <div class="panel-title">
      <div ng-show="editMode">Process Details</div>
        <div ng-hide="editMode">Create New Process</div>
      </div>
   </div>
 <div>
<div class="panel-body">
  <div class="row">
    <form name="createProcessFormName" id="createProcessForm" name="form" role="form" class="form-horizontal" kendo-validator="validator" k-validate-on-blur="false" k-options="myValidatorOptions" ng submit="validate($event)">
      <div class="panel-body formHeight">
        <div>
          <p class="status {{ validationClass }}">{{validationMessage}}</p>
        </div>
        <div class="row">
          <div class="form-group col-md-6 fieldHeight">
            <label for="countries" class="col-md-5 required">Geographic Locations:</label>
          <div class="col-md-7">
            <div multiselect-dropdown-tree ng model="nonPersistentProcess.geoLocations"  disable-children="true" options="treeviewOptions">
            </div>
            <p class="text-danger" ng-show="geoLocationRequired">GeoLocation is required</p>
         </div>
       </div>
    </div>                  
<div class="panel-footer">
  <span>
    <button ng-hide="editMode" class="btn btn-primary pull-right" type="button" ng-click="validate($event)">Save</button>
  </span>
</div>

validate.js

 $scope.validate = function (event) {
   event.preventDefault();
   if(!$scope.nonPersistentProcess.geoLocations.length){
     $scope.geoLocationRequired = true
    }
 }

Upvotes: 1

Views: 447

Answers (1)

Olatunde Garuba
Olatunde Garuba

Reputation: 1069

use the $valid form attribute in angularjs

 $scope.validate = function (event, valid) {
   event.preventDefault();
   if(valid){
     if(!$scope.nonPersistentProcess.geoLocations.length){
       $scope.geoLocationRequired = true
      }
   }
};

and on your template, you need to pass in the form.$valid. such as;

<span>
  <button ng-hide="editMode" class="btn btn-primary pull-right" type="button" ng-click="validate($event, createProcessFormName.$valid)">Save</button>
</span>

Upvotes: 1

Related Questions