Validation are not show after click the button in Angular JS?

Question

I have to show the validation after submit button in our form i don't understand what's the wrong in my code tell m anyone how to implemented using after submit?

var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {

  // function to submit the form after all validation has occurred
  $scope.submitDetail = false;
  $scope.submitForm = function(isValid) {
    $scope.submitDetail = true;
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }

  };

});

<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)">
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="username" ng-model="user.username">
    <p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
      You name is required.
    </p>
  </div>
  <button type="submit">Join now</button>
</form>

Irvin Sandoval · Accepted Answer · 2018-03-27 17:03:10Z

You need to add in your input a ng-required="true" and disable default form validation with novalidate like this:

var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {

  // function to submit the form after all validation has occurred
  $scope.submitDetail = false;
  $scope.submitForm = function(isValid) {
    $scope.submitDetail = true;
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }

  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="demoController" >
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="username" ng-model="user.username" ng-required="true">
    <p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
      You name is required.
    </p>
  </div>
  <button type="submit">Join now</button>
</form>
</div>

Collectives™ on Stack Overflow

Validation are not show after click the button in Angular JS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related