Jquery-steps -- How to trigger ng-messages validation from controller js code

Question

I have a form, which has components bound to ng-messages validation system, and which is divided into several sections using jquery-steps.

I need to trigger validation when user navigates from section to section pressing jquery-steps buttons. These are simple buttons, which do not submit the form. In the code, that is bound to the navigation between sections I can clearly see if the data is typed in and whether it is correct : for instance, I can successfully refer to $scope.eventForm.title.$valid. However, I would like to force-show validation messages when the data is incorrect. Currently they only appear after I click on either of the inputs, but I would like to trigger them from controller. Is it possible?

The html of the view:

<div ng-controller="eventDetailsController as ctrl" ng-cloak>
  <md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
    <div flex-xs flex-gt-xs="70" layout="column">
      <form name="eventForm">
        <div wizard="{content: '#format-toolbar-options', position: 'top'}" id="event_wizard">

          <h3>Basic data</h3>
          <section>

            <md-card>
              <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/>
              <md-card-title>
                <md-card-title-text>
                  <h3>New event</h3>
                </md-card-title-text>
              </md-card-title>
              <md-card-content>

                <div layout="row">
                  <md-input-container class="md-block" flex="50">
                    <label>Title</label>
                    <input md-maxlength="30" required md-no-asterisk name="title" ng-model="event.title">
                    <div ng-messages="eventForm.title.$error">
                      <div ng-message="required">This is required.</div>
                      <div ng-message="md-maxlength">The title must be less than 30 characters long.</div>
                    </div>
                  </md-input-container>
                </div>

                <div layout="row">
                  <md-input-container class="md-block">
                    <label>Contacts</label>
                    <input required type="email" name="contacts" ng-model="event.contacts"
                minlength="10"  maxlength="100" ng-pattern="/^.+@.+\..+$/" />

                    <div ng-messages="eventForm.contacts.$error" role="alert">
                      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                        Your email must be between 10 and 100 characters long and look like an e-mail address.
                      </div>
                    </div>
                  </md-input-container>
                </div>

              </md-card-content>
           </md-card>
          </section>

          <h3>Some other data</h3>
          <section>
          </section>

        </div>
      </form>
    </div>
  </md-content>
</div>

The controller with function which is bound to navigation between sections :

var eventDetailsController = function($scope, $http, __config){

    $scope.stepChanging = function(event, currentIndex, newIndex)
    {
        var valid = true;
        if(!$scope.eventForm.contacts.$valid)
        {
            //call some function which triggers contacts validation message
            //tried this as suggested in one of SO posts, but it did not work out
            $scope.eventForm.contacts.$setTouched();
            valid = false;
        }
        if(!$scope.eventForm.title.$valid)
        {
            //call some function which triggers title validation message
            valid = false;
        }

        //call some function which triggers all validation messages

        return valid;
    }
};

Answer 1

Use the $validate() function:

$scope.eventForm.contacts.$validate();
$scope.eventForm.title.$validate();

From the Docs:

$validate();

Runs each of the registered validators (first synchronous validators and then asynchronous validators). If the validity changes to invalid, the model will be set to undefined. If the validity changes to valid, it will set the model to the last available valid $modelValue, i.e. either the last parsed value or the last value set from the scope.

— AngularJS ngModelController API Reference - $validate