Form validation with angularjs

Question

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.

ssilas777 · Accepted Answer · 2015-09-23 14:59:51Z

1

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..

edited Sep 23, 2015 at 14:59

answered Sep 23, 2015 at 14:57

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

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

Comments

Chris Story · Accepted Answer · 2015-09-23 14:59:58Z

1

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 :)

answered Sep 23, 2015 at 14:59

Chris Story

1,1971 gold badge8 silver badges17 bronze badges

Comments

cullimorer · Accepted Answer · 2015-09-23 14:53:24Z

0

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>

answered Sep 23, 2015 at 14:53

cullimorer

7551 gold badge5 silver badges25 bronze badges

3 Comments

user4925190 Over a year ago

it is required only when one of the fields is and the other two are required. It can be in any order. Otherwise u can hit continue.

cullimorer Over a year ago

Am I understanding correctly, the continue button should be enabled when none or all three are entered? If not, I'm not sure I understand fully the requirements.

ssilas777 Over a year ago

A field is required only if there is value in any other fileds, else it's not required.

Collectives™ on Stack Overflow

Form validation with angularjs

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related