Home/ Questions/Q 9171083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:06:53+00:00

I’m new to AngularJS and perhaps I’m going about this the wrong way, but

  • 0

I’m new to AngularJS and perhaps I’m going about this the wrong way, but I’m having problems validating a form.

I have one form containing multiple DIVs. Each DIV represent a page in the form flow. I’ve got a single Next-button to take the user to the next page (DIV).

A page is shown based on a “currentpage” field in the $scope, e.g. 

<form> 
    <div ng-show="currentpage == 1">
        <input type="text" required />
    </div>
    <div ng-show="currentpage == 2">
        <input type="text" required />
    </div>
    <button ng-disabled="??" ng-click="next()" />
</form>

I want a click on the Next-button to trigger form validation on the visible DIV controls only, and not the hidden ones. Disabling the Next button based on the visible controls’ validation status is perfect. But how? I would very much like to avoid using JQuery in my controller.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems to me that if you can have one of them null or empty upon submission, it’s not really “required” is it?

    You should probably have each of those in a separate form. Because it sounds like you’ve got some sort of conditional submit based off of what the current page is, which is going to get hairy to maintain.

    Here is an example of form validation for each of your two forms. In this example, each form still submits to the same method if you really want it to go that way, but I’d recommend just having them submit to their own method, rather than have to shoehorn everything into a switch statement. In some cases I might even give each of the forms their own controller.

    <form> 
    <div ng-show="currentpage == 1">
        <form name="page1Form" ng-submit="next(currentPage)">
           <input type="text" name="item1" ng-model="item1" required />
           <span ng-show="page1Form.item1.$dirty && page1Form.item1.$error.required">required</span>
           <button type="submit" ng-disabled="page1Form.$invalid">Submit</button>
        </form>
    </div>
    <div ng-show="currentpage == 2">
        <form name="page2Form" ng-submit="next(currentPage)">
           <input type="text" name="item2" ng-model="item2" required />
           <span ng-show="page2Form.item2.$dirty && page2Form.item2.$error.required">required</span>
           <button type="submit" ng-disabled="page2Form.$invalid">Submit</button>
        </form>
    </div>
</form>
    • 0