AngularJS 1.5 - Form submission with missing mandatory fields triggers on iOS

Question

AngularJS 1.5 - Form submission with missing mandatory fields triggers on iOS

I've been working on a Cordova app using AngularJS (1.5.11) and I've run into a strange bug on iOS that doesn't occur on Android (despite using the same code).

I've stripped down unnecessary elements from the form to isolate the issue, but the bug persists.

Below is the simplified form:

<form method="post" ng-submit="$ctrl.login()">
    <input type="email" name="username" value="" required ng-model="$ctrl.username">
    <input type="password" name="password" value="" required ng-model="$ctrl.password">
    <button type="submit">Submit</button>
</form>

The problem I'm facing is that the form submits even when it's invalid. It's a basic login form with fields for username, password, and a submit button.

Strangely, this issue affects every form in my app.

Am I overlooking something here? Any help would be greatly appreciated :)

javascript ios angularjs forms cordova

Answer 1

Answer №1

You have three choices available:

Option 1: Inactivate the submit button when the form is not valid:

<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>

Option 2: Disregard the submission if the form is invalid:

<form name="needNameForm" method="post" 
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>

Option 3: Validate in your submit method:

<form name="needNameForm" method="post" 
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- For testing purposes, you can display this line below -->
<pre>{{needNameForm | json}}</pre>

In your controller:

angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
  if(formController.$valid){
   performActions();
  }
 }
}

By choosing the third option, you gain more control over individual input validation within the form. The formController object provides comprehensive information for each input. Don't forget to assign names to your inputs for complete data access. Refer to this documentation for more details.

Answer 2

You have three choices available:

Option 1: Inactivate the submit button when the form is not valid:

<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>

Option 2: Disregard the submission if the form is invalid:

<form name="needNameForm" method="post" 
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>

Option 3: Validate in your submit method:

<form name="needNameForm" method="post" 
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- For testing purposes, you can display this line below -->
<pre>{{needNameForm | json}}</pre>

In your controller:

angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
  if(formController.$valid){
   performActions();
  }
 }
}

By choosing the third option, you gain more control over individual input validation within the form. The formController object provides comprehensive information for each input. Don't forget to assign names to your inputs for complete data access. Refer to this documentation for more details.

AngularJS 1.5 - Form submission with missing mandatory fields triggers on iOS

Answer №1

Similar questions

Can you explain the distinction between document.body.ononline and navigator.onLine?

Unable to access a frame inside an iframe and frameset using JavaScript when both domains are identical

What could be causing the function to not work properly within the React component?

Is it possible to assign a value to a React hook within a promise?

angular directive losing track of child content

Connections between Ember and mongo databases

Ways to have a div show up and stay in place as you scroll down?

Tips on implementing multiple routing in AngularJS

What is the best way to perform an action on viewController1 from a button situated on viewController2?

Invoke a React component within a conditional statement

The request to https://sandbox.itunes.apple.com/verifyReceipt is being blocked because the origin is not permitted by Access-Control-Allow-Origin

Error in Cordova integration with Razorpay [RazorPayCheckout not found]

Communicating between modules in Angular Js using Factories

What is the best method for converting a variable with HTML content into a printable string?

Dynamically load scripts at runtime and verify their successful loading

Having trouble obtaining and removing the index of a string in an array in JavaScript

Dealing with the name attribute in an array of ngModels in Angular 4

Include a conditional statement in a JavaScript function to generate HTML content

Struggling to display the Three.js LightMap?

Pseudo-class for clicking a button on Mobile WebKit