Angularjs validation not working on submit button

Question

Hi I am new to angularjs. I am trying to do simple validation for required field as below.

<ng-form name="form" ng-submit="submit()">
 <div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
 <div class="button-container">
<input type="submit" value="Cancel" id="input-cancel">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" ng-click="RegisterUser()" value="Submit" id="input-submit"/>
</div>
</ng-form>

When i click on submit my validation are not working. If i click on textbox and click outside validations are working. May I get some help here to fix this? Any help would be appreciated. Thank you.

Answer 1

I would also add novalidate attribute to the form like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="ctrl">

    <form novalidate name="form" ng-submit="submit()">
       <div class="inputblock">
      <span class="input-icon"><img src="images/office-icon.png"></span>
      <input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
      <span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
      <span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
      </span>
      </div>
      <div class="inputblock">
      <span class="input-icon"><img src="images/office-icon.png"></span>
      <input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
      <span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
      <span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
      </span>
      </div>
       <div class="button-container">

      <input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" value="Submit" id="input-submit"/>
      </div>
    </form>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

</body>
</html>

Otherwise the browser takes over.
And code to go with it:

angular.module('app', [])
.controller('ctrl', function($scope){

  $scope.submit =function(){
    $scope.RegisterUser();
  }
})

Angularjs validation not working on submit button

Question

1 answers

solution1
0 ACCPTED 2017-04-10 11:40:58

Angularjs validation not working on submit button

Question

1 answers

solution1 0 ACCPTED 2017-04-10 11:40:58

solution1
0 ACCPTED 2017-04-10 11:40:58