Ionic 3 form still warning me: "Password field is not contained in a form"

Question

I'm new to the Ionic framework, and I'm using Ionic 3.

Even though I use a form in my app, I'm still getting this warning in the browser:

[DOM] Password field is not contained in a form:

Why is that, and how can I fix it?

Answer 1

What is it?*

Chromium project (mostly Google Chrome) wants to change the world and make all passwords, as well as all form data autosaved and autofilled by default. The people behind this decision claim that will make the web safer†. While Firefox also promotes autosaved and autofilled form data, Chrome goes further admonishing web developers to comply with form element scoping that's more convenient for the browser.

At the same time, Google Chrome uses heuristics to determine what a "form" is on the web page and doesn't actually need individual form elements to be wrapped in a <form> element.

Additionally, Google Chrome treats all web pages, all forms and all form fields as if they are filled by the end user, where password is user's own password. A use-case where e.g. company administrator fills in new joiner's initial password is not supported.

The shortened URL in the form takes you to Create Amazing Password Forms page the the Chromium projects. Today the text there is very patronising, thus I'll omit the link.

†I neither claim to agree with Chrome/Chromium, nor claim that Google is in the position to profit from autofill via lock-in or access to user data; that's out of scope.

How can I fix it?

Simple: ignore it.

It's only a notice in developer tools in one of the major browsers.

Answer 2

Solution 1:

I think you are using Chrome browser. If you will try on Mozilla, it will not give the error. Please refer to this link for more details: https://github.com/aws-amplify/amplify-js/issues/165

Here is the example:

<div className="myform" onSubmit={this.validateLogin()}>
    <div className="myformgroup">
        <label>Email</label>
        <input type="text" placeholder="Email" id="email"></input>
    </div>
    <div className="myformgroup">   
        <label>Password</label>
        <input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
    </div>
    <div className="myformgroup">
        <button type="submit" id="loginButton">Login</button>
    </div>
</div>

Is returning the password field is not contained in a form.

Solution 1: After changing the master div tag to a form as I have in the following:

<form className="myform" onSubmit={this.validateLogin()}>
    <div className="myformgroup">
        <label>Email</label>
        <input type="text" placeholder="Email" id="email"></input>
    </div>
    <div className="myformgroup">   
        <label>Password</label>
        <input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
    </div>
    <div className="myformgroup">
        <button type="submit" id="loginButton">Login</button>
    </div>
</form>

it will not return the warning.

Solution 2:

Install aws-amplify in your project directory as explained in https://github.com/aws-amplify/amplify-js.