CODEWITHSUNDEEP
javascripthtmlangularjs
user4925190
user4925190

Reputation: 205

Form validation with angularjs

I want to a validation on a form in the angular way. I have three input boxes. All three are required when one of them is entered. Otherwise they are not required. Continue button must be enabled only when all three are entered or not enetered.

You can review the code on this plunker. Here's a snippet, too, just in case plunker is inconvenient:

angular.module('test', []).config(function() {});

angular.module('test').controller('testctrl', function($rootScope, $scope, $location) {
  $scope.admin = [{
    "number": "2"
  }];
  $scope.adminInfos = {};
  $scope.validations = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="test_form">
  <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].email.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
  <br/>
  <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" ng-required="adminInfos[admin.number].firstname.length && adminInfos[admin.number].lastname.length" />
  <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

  <br/>
  <br/>

  <button ng-disabled="test_form.$invalid">Continue</button>

</form>

I have an issue where continue button is still enabled if I enter the first name and leave the last name and email as blank.

Continue button must be enabled if all three are not entered or all three are entered.

Upvotes: 0

Views: 63

Answers (3)

Chris Story
Chris Story

Reputation: 1197

You have a logical flaw. ng-required should be or (||) not and (&&). See fork below.

Plunkr

<input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" ng-required="adminInfos[admin.number].lastname.length && adminInfos[admin.number].email.length" />

As a note, please put this complicated UI logic inside a method on the controller :)

Upvotes: 1

ssilas777
ssilas777

Reputation: 9804

Your ng-required condition is wrong, change your ng-required condition to use or (||) instead of & for all fields

 ng-required="adminInfos[admin.number].lastname.length || adminInfos[admin.number].email.length"

Check this plunker, it works..

Upvotes: 1

cullimorer
cullimorer

Reputation: 755

You don't need to do ng-required, you can just replace this with simply 'required' to indicate it is necessary in order for the form to be valid. See below:

<!DOCTYPE html>
<html ng-app="test">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="testctrl">
  <form name="test_form">
    <input type="text" name="admin{{admin.number}}_firstname" ng-model="adminInfos[admin.number].firstname" placeholder="First Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_firstname.$pristine && (adminInfos[admin.number].email.length || adminInfos[admin.number].lastname.length) && !adminInfos[admin.number].firstname.length" class="error">First name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_lastname" ng-model="adminInfos[admin.number].lastname" placeholder="Last Name" required />
    <span ng-show="!system_admins.admin{{admin.number}}_lastname.$pristine && (adminInfos[admin.number].email.length ||  adminInfos[admin.number].firstname.length ) && !adminInfos[admin.number].lastname.length" class="error">Last name is required</span>
    <br/>
    <input type="text" name="admin{{admin.number}}_email" ng-model="adminInfos[admin.number].email" placeholder="Email Address" required />
    <span ng-show="!system_admins.admin{{admin.number}}_email.$pristine && !adminInfos[admin.number].email.length && (adminInfos[admin.number].lastname.length || adminInfos[admin.number].firstname.length)" class="error">Email is required</span>

    <br/>
    <br/>

    <button ng-disabled="test_form.$invalid">Continue</button>

  </form>
</body>

</html>

Upvotes: 0

Related Questions