Password field is not contained in a form

Ionic Framework Ionic Vue
1

I’m getting the following warning on my Ionic + Vue login form.

[DOM] Password field is not contained in a form: (More info: Create Amazing Password Forms)

<input class="native-input sc-ion-input-md" id="ion-input-1" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-1" placeholder="" required="" spellcheck="false" type="password" aria-label="Password">

My Vue template looks something like this.

<ion-item lines="inset">
  <ion-label position="floating">Email</ion-label>
  <ion-input aria-label="Email" ref="emailInput" v-model="email" type="text" required></ion-input>
</ion-item>
<ion-item lines="inset">
  <ion-label position="floating">Password</ion-label>
  <ion-input aria-label="Password" ref="passwordInput" v-model="password" type="password" required></ion-input>
</ion-item>

Any ideas why I’m getting this warning? Do I need to wrap the ion-input elements inside a form tag?

2

That is quite interesting. I just tried my Vue login page without a form tag and am not getting that warning/error. Is [DOM] some package/plugin you are using?

Can you share your entire Login Vue component?

3

The warning is happening on Chrome, if I add <form> at start and ` at end, then the warning goes away.

Note, I don’t get warning for email or name fields, only for password. I’m using the latest Chrome on Mac, Version 119.0.6045.159.

Here’s an old stack overflow post with similar problem ionic3 - Ionic 3 form still warning me: "Password field is not contained in a form" - Stack Overflow.

4

I am also testing in Chrome on Linux with an Ionic Input set with a type of password without being wrapped in a form tag. I figured it out though. I didn’t have Verbose logging on. With Verbose on, I do see the same message when I remove the form tag for my Login.vue component.

As the message and SO link state, it is just a warning from Chrome so you could either ignore it or wrap your inputs in a form tag. I believe it is good practice to use a form tag especially for accessibility though.

EDIT

Example

<form @submit.prevent="login">
  <ion-input aria-label="Password" ref="passwordInput" v-model="password" type="password" required></ion-input>
  <ion-button type="submit">Login</ion-button>
</form>

login in @submit.prevent being your method to call upon button tap/click.