Validation of angular form without submit button

Question

I am using anuglar.js form validation. I want to check validation without form submit button.

This is my html.

<form name="userForm">
  <input type="hidden" ng-model="StandardID" />
  <div class="form-group">
    <label for="email">Name:</label>
    <input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
    <span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
  </div>
  <div class="form-group">
    <label for="pwd">Alias:</label>
    <input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
  </div>

  <button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
  <button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>

My controller js is.

$scope.update= function () {
    alert($scope.userForm.Name.$valid);
    if ($scope.userForm.Name.$valid) {
        alert("Entry added");
    }
}

It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?

not working. i did it before but i don't know what is wrong in this code. why span section is not showing. — user3248761
– user3248761, Commented Feb 18, 2017 at 4:12

The.Bear · Accepted Answer · 2018-07-17 14:55:36Z

3

To do it, the key is use the name attribute in your <form> and in all of your inputs. Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid

For example:

<form name="myForm" novalidate>     
    <label>My Input:</label>
    <input type="text" name="myInput" ng-model="myInput" required>
    <span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>

Check angular docs

edited Jul 17, 2018 at 14:55

answered Feb 18, 2017 at 4:21

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

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

2 Comments

user3248761 Over a year ago

yes working but with this "Please fill out this field" notification dialog also visible. how to remove it?

The.Bear Over a year ago

Where do you see that notification? Is the browser notification when you submit the form? Try to put <form name="userForm" novalidate>

Pramod Patil · Accepted Answer · 2017-02-18 04:41:32Z

HTML

<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>

   <input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
                              <div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
                                 <span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
                              </div>

                 <div class="form-group">
                            <label for="pwd">Alias:</label>
                            <input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
                        </div>
    <div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
      <span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
    </div>

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

directive

  .directive('ngModel', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {
            elem.on('blur', function() {
                ngModel.$dirty = true;
                scope.$apply();
            });

            ngModel.$viewChangeListeners.push(function() {
                ngModel.$dirty = false;
            });

            scope.$on('$destroy', function() {
                elem.off('blur');
            });
        }
    }
});

Collectives™ on Stack Overflow

Validation of angular form without submit button

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related