JavaScript/Angular Trigger Form Validation

Question

Update:

If I am filling out the AngularJS Forms with simple code below.

 document.getElementByID("username").value = "ZSAdmin"
 document.getElementByID("password").value = "SuperSecure101"

how can I cause the AngularJS Form validation before calling:

document.querySelectorAll("form[name='loginForm'] button.icon-login")[0].click()


<form name="loginForm" ng-submit="login()" autocomplete="off" class="ng-dirty ng-valid ng-valid-required">
<button type="submit" class="icon-login" ng-disabled="!loginForm.$valid"></button>
<input type="text" name="username" id="username" placeholder="Username / Email" autocapitalize="off" autocorrect="off" required="" ng-model="credentials.username" class="ng-dirty ng-valid ng-valid-required">
<input type="password" name="password" id="password" placeholder="Password" autocapitalize="off" autocorrect="off" required="" ng-model="credentials.password" class="ng-dirty ng-valid ng-valid-required">

mahi-man · Accepted Answer · 2017-04-17 20:33:33Z

2

According to the docs for ng-submit, it "prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes."

So I don't think you can submit the form. You could click your submit button though:

document.querySelectorAll("form[name='loginForm'] button.icon-login")[0].click()

Update:

If you want to change the values programatically to trigger angular's digest cycle i.e. update the form validations, you have to access the angular scope:

var $scope = angular.element("#username").scope();
$scope.$apply(function() {
  $scope.credentials.username = "ZSAdmin";
  $scope.credentials.password = "SuperSecure101";
  #you can even trigger the login from here if you want instead of the button click in the answer above:
  $scope.login();
});

edited Apr 17, 2017 at 20:33

answered Apr 17, 2017 at 2:01

mahi-man

4,7563 gold badges28 silver badges42 bronze badges

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

4 Comments

Zach Schulze Over a year ago

This triggers an error with angular. And does not work either. :/ also I can't change the HTML as it is to a website that I have not control over

mahi-man Over a year ago

What is the angular error? If it is because you cannot change the html, then I am assuming it cannot find the button by id as it has none. I have changed the answer to locate the button by the class within the form i.e. it should be able to locate the button without changing the html

Zach Schulze Over a year ago

This is veryyy close. The Only issues is because of class="ng-dirty ng-valid ng-valid-required Angular doesn't validate the fields because I set them like document.getElementByID("username").value = "Zachary"

mahi-man Over a year ago

Updated answer to change the data via accessing angular scope. If you are accessing the scope you can also trigger the form submit from there too i.e. call the login() function that is called in the ng-submit

Collectives™ on Stack Overflow

JavaScript/Angular Trigger Form Validation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related