Skip to Main Content
Forums

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Knockout and Autofill issue

1102760Mar 20 2017 — edited Sep 20 2019

Hi All,

I have a login form with 3 fields Username, Password and Account name (all three set to required true and autocomplete="off")

<input id="loginemail" autocomplete="off" data-bind="ojComponent: {component: 'ojInputText', value: loginemail, placeholder: 'Registered email address', required: true}">

<input id="loginpassword" autocomplete="off" data-bind="ojComponent: {component: 'ojInputPassword', value: loginpassword, placeholder: 'Password for the PIC account', required: true}">

<input id="accountname" autocomplete="off" data-bind="ojComponent: {component: 'ojInputText', value: accountname, placeholder: 'PIC account name', required: true}">

Everything works fine except:

  1. Even though autocomplete="off", Chrome still offers to save the username and password (seems like a Chrome quirk). As a result of this, if a user chose to save the credentials, Chrome will autofill the form but will not trigger a Knockout state change. This causes issue as the API gets the username, password field as "". Online there are workarounds suggested including one from Knockout (Knockout : The "textInput" binding ). How do I use it with ojInputText ?
  2. Does "required: true" just add a * to the label or it also checks if the field is actually populated ? Its a hit or miss, sometimes it works sometimes it does not. Is this also related to Knockout change event not being fired correctly ?

How to handle these issues ?

Comments

Brahmaiah

Hi,

is this issue resolved? I am also facing the same issue.

Thank you

Regards

Brahma

Dan Curtis

Hi both

What versions of JET are you using? If you are on version 4+ then you shouldn't be using the data-bind syntax anymore, you should move to the input text components as below:

<oj-input-text

    id="loginemail"

    autocomplete="off"

    value="{{loginemail}}"

    placeholder="Registered email address" required>

</oj-input-text>

<oj-input-password

    id="loginpassword"

    autocomplete="off"

    value="{{loginpassword}}"

    placeholder="Password for the PIC account" required>

</oj-input-password>

<oj-input-text

    id="accountname"

    autocomplete="off"

    value="{{accountname}}"

    placeholder="PIC account name" required>

</oj-input-text>

For point 1: I would initially advise changing the components as above. If you are still having issues with Chrome autofilling, try wrapping the inputs in a form element, and then setting the autocomplete value to 'new-password'.

For point 2: required will validate the fields, you need to add show-required='true' to the label to show the *. Your login function will need to check whether the fields are valid also. You may want to look into a validation group for this.

Dan

1 - 2

Post Details

Added on Mar 20 2017
#oracle-jet
2 comments
571 views