How to tell Chrome form does not contain credit card fields?

Question

Chrome is being overzealous and thinks my HTML form contains credit card information and thus proposes to fill it in with credit card information.

Are there any attributes that I can use to tell Chrome that there is no credit card information to be filled in, in this form?

The field names it is trying fill in credit card information in are:

• reg_id (it puts in a CC number here)
• emergency_first_name (it puts in first name here)
• emergency_last_name (it puts in last name here)

I don't want to have to disable autocomplete if I don't have to.

The frustrating thing here is the Chrome 'knows better' attitude, where it ignores any value to autocomplete, including off:

<input autocomplete="off" value="" size="10" maxlength="10" id="id_reg_id" name="reg_id" type="text">

Edit: updated following answers.

Answer 1

I have been banging my head against the desk for a while because of this. We have forms to enter Instruments test data, and a field called "Test Card Number", as well as "Kit (Exp. Date)". Guess what Chrome thinks these fields are for?

Needless to say, I'm pretty sure the users would be VERY upset to see chrome us trying to pull their CC information when they're inputing clinical research data.

Even autocomplete="new-password" and autocomplete="nope" are failing to do any good, here.

I tried to load the field with no label and add it dynamically in javascript. No dice. Used html entities instead of characters. Nope.

Well, after a few hours of scouring the web with no solution in sight, I figured one out: insert a few random - within each word of the offending labels. (For me, with Test Card Number, it had to be in BOTH Card and Number. Test was fine left alone).

One could easily write a javascript extension/utility function to split the html of an offending label and slap that invisible span down the middle (and one to remove it in case of needing to use the label value).

Something like this (using jQuery and old js standards because we support old browsers, with no verifications if label is missing or empty, so adapt accordingly. In fact, I'm sure a regex or some other fancy stuff could be used, but I don't have the time to fiddle around with it atm):

jQuery.fn.breakAutofill = function () {
    var $lbl = $("label[for='" + this[0].id + "']"),
        finalText = $lbl.html().split(" "),
        foilSpan = "<span style='display:none;'>-</span>";

    for (var idx in finalText) {
        var textVal = finalText[idx],
            midPos = Math.floor(textVal.length / 2);
        finalText[idx] = textVal.substr(0, midPos) + foilSpan + textVal.substr(midPos);
    }
    $lbl.html(finalText.join(" "));
}

Which you can then call on document ready :

$("your_input_selector").breakAutofill();

I hope that helps someone.

Answer 2

Your browser shouldn't remember your credit card number by default -- I can only assume that you entered into a field that had a 'generic' autocomplete value on it. You can always force your browser to forget this information by simply hitting Delete when selecting it (with the arrow keys) in the dropdown of pre-fill options.

As for preventing it appearing in certain fields, it depends on what information you want each field to hold, but there's a wide array of autocomplete values that you can use. You can use number for IDs, and the other two fields you mentioned actually come with specialised autocomplete values, given-name and family-name:

<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />

If number just won't cut it, you can also make use of a JavaScript regular expression to further restrict input:

const regex = new RegExp("^[a-zA-Z]+$");
const form = document.getElementsByTagName('form')[0];
const reg_id = document.getElementsByTagName('input')[0];

form.addEventListener('click', function(e) {
  e.preventDefault();
  if (regex.test(reg_id)) {
    this.submit();
  }
});

<form>
  <input name="reg_id" autocomplete="number" />
  <input name="emergency_first_name" autocomplete="given-name" />
  <input name="emergency_last_name" autocomplete="family-name" />
</form>