AngularJS - Form Custom Validation - Check if at least one input is empty

Question

Given a simple html form like this:

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference" />
... submit input and all the other code...
</form>

I need your help to know how to check on validation time, if at least one of the inputs is empty. The desired validation is the following. The user must complete at least one a preference.

Using jQuery this:

if ( $("input").val() == "" ) {

Works ok, but would like to figure out how to do the same thing using angular.

Thanks so much in advance,

Guillermo

zs2020 · Accepted Answer · 2013-08-15 20:28:46Z

29

So the idea is to disable the submit button if all inputs are blank. You can do like this

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference2" />
   <input name="userPreference1" type="text" ng-model="shipment.userPreference3" />

   <button type="submit" ng-disabled="!(!!shipment.userPreference1 || !!shipment.userPreference2  || !!shipment.userPreference3)">Submit</button>
</form>

!!str is to force to convert str to a boolean value. And both !!null and !!"" are evaluated to be false.

Demo

edited Aug 15, 2013 at 20:28

answered Aug 15, 2013 at 20:20

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

9 Comments

Guillermo Over a year ago

sza, thanks for your answer! The user won't be required to enter all the fields, just one, so because of that I need to check when validating if at least one input was populated.

zs2020 Over a year ago

@Guillermo Then they should have different model.

zs2020 Over a year ago

@Guillermo Checkout ng-repeat. Keep in mind, AngularJS is data/model driven, if you want to manipulate the dom in normal case, just think in how to design the data structure. And angularjs will magically change the dom for you.

Chris Webb Over a year ago

There's a better way of doing this. On each of your inputs, add ng-required. That will cause your form controller to run validation, then your <button> statement simply becomes ng-disabled="frmTicket.$invalid"

marksyzm Over a year ago

You don't need the !!string - just use !(shipment.userPreference1 || shipment.userPreference2 || shipment.userPreference3)

|

Mouli · Accepted Answer · 2013-08-15 20:22:03Z

4

You can set the "required" in the input elements and style / code how you want to handle with $valid of a form. Check out http://dailyjs.com/2013/06/06/angularjs-7/

answered Aug 15, 2013 at 20:22

Mouli

1,66115 silver badges21 bronze badges

1 Comment

Guillermo Over a year ago

Mouli, thanks for your answer, I know it's weird, but in the original state, the user will see three inputs, and will be required to fill at least one, but not all of them. So that's why I think that adding required won't fit for me. I need some equivalent of $("input").val() == "" applied to angularjs. Thanks!!

marksyzm · Accepted Answer · 2015-02-09 11:37:42Z

4

My solution was the following:

        $scope.requiredInputsGroup = function () {
            var isRequired = true;
            if (!$scope.shipment) {
                return true;
            }
            angular.forEach(["userPreference1", "userPreference2", "userPreference3"], function (input) {
                if ($scope.shipment[input]) {
                    isRequired = false;
                    return false;
                }
            });

            return isRequired;
        };

You apply that method to a data-ng-required in each of the inputs...

<form name="myForm" action="#sent" method="post" ng-app>
   <input name="userPreference1" type="text" ng-model="shipment.userPreference1" ng-required="requiredInputsGroup()" />
   <input name="userPreference2" type="text" ng-model="shipment.userPreference2" ng-required="requiredInputsGroup()" />
   <input name="userPreference3" type="text" ng-model="shipment.userPreference3" ng-required="requiredInputsGroup()" />

   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

And the last bit I applied was to make the button disabled with a simple myForm.$invalid

answered Feb 9, 2015 at 11:37

marksyzm

5,6412 gold badges32 silver badges28 bronze badges

1 Comment

Yeysides Over a year ago

Great solution! I altered it so you can pass in the model you are testing against instead of passing an array into the forEach. The only problem was testing against checkboxes which return an 'N' when not checked, but that was really easy to check for in the if. Thanks!

Collectives™ on Stack Overflow

AngularJS - Form Custom Validation - Check if at least one input is empty

3 Answers 3

9 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related