0

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;
    }
};
6
  • When you mix jQuery plugins such as jquery-steps with AngularJS, you ask for major headaches. The question as written does not provide enough information to reproduce the problem. Commented Aug 6, 2017 at 19:01
  • Created this plunker : plnkr.co/edit/Allj9kGU3HpwxaOtX0Yd, where the problem can be clearly reproduced : the "Next" button does not trigger error message under "Title" input unless the input has been clicked at before. Regarding the plugins : yes, I do realize that, and I cleaned out all jq plugins except jquery-steps, as this one is just extremely handy. Commented Aug 7, 2017 at 10:50
  • The demo never calls the $scope.stepChanging function in the controller. The problem is not there. It is with the directive that attempts to integrate jquery-steps with AngularJS. Commented Aug 7, 2017 at 11:27
  • 1
    See Github: jquery-steps Issue #121 - Dont work with Angular.js Commented Aug 7, 2017 at 11:53
  • Updated the demo with logging to console from the function. In my case (I use Chrome 60.0.3112.90) the function is correctly called and the logging - done. Can you provide your browser version ? If this is true for that browser version, it is way more serious, than the problem, that I stated. Commented Aug 7, 2017 at 12:12

1 Answer 1

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

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

1 Comment

Thank you for the advice! It did not work out for some reason though, the error messages are still not showing though validity states of inputs are observable and are false. Now I suspect that "required" attributes on my inputs are somehow conflicting with the other ng-messages functionality

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.