polymerelements / gold-cc-cvc-input Goto Github PK

Description

I have multiple inputs in a form, paper-* and gold-*. All of them have "auto-validate" and "required".

<paper-input id="name" auto-validate required></paper-input>
<gold-phone-input id="cc" auto-validate required></gold-phone-input>
<gold-cc-cvc-input id="cvc"  auto-validate required></gold-cc-cvc-input>

Field becomes "invalid" and highlighted with red when:
a) user clicks some input and then clicks another ("blur" happens) without typing any value
b) user enters some value which is invalid (phone, cvc)

If user just clicked and entered nothing - I want to reset this form later - to set "invalid" to false for all empty inputs. But for paper-inputs it works, for gold-inputs - does not. When I do this:

   this.$.name.invalid = false;
   this.$.phone.invalid = false;
   this.$.cvc.invalid = false;

paper input validation is reset, but gold-* inputs are still highlighted with red (they're empty).

This inconsistency makes our interface look weird. Especially in address forms, where some inputs are paper-* (name, address, ..) and some are gold-* (phone, cc, cvc, zip). I cannot reset form back to initial non-validated status.

Expectations

I'd expect this logic: if gold-* input value is empty, and developer sets "invalid" to "false" - set paper-input-container.invalid to false so that validation is reset.

Here's jsbin
https://jsbin.com/zazuyi/edit?html,output

Why do devs have to touch this at all? It's already a custom element, why not have the smarts built in?

Proposed behaviour:

1. Give it a for attribute, which takes a selector for a <gold-cc-input> element.
2. If that's not there, and if the parent <form>, <iron-form>, or non-<form> first parent also has a single <gold-cc-input> as a child, then bind to that
3. Otherwise devs are left with the current behaviour

It should, practically, also solve #18 (as it's very rare for a user to enter the CVC before the card number).

(Issue based off Polymer website demo at time of entry)

gold-cc-cvc-input does not accept numbers typed via the numpad as valid.

The img elements in gold-cc-cvc-input have relative src urls (eg src='cvc_hint.png'). This causes the images to be requested relative to the document path, not the component's source path; so the image requests will fail... Eg:

Page at /mypath has a gold-cc-cvc-input element. The img elements within gold-cc-cvc-input request their images with relative paths, so 'cvc_hint.png' is requested at /mypath/cvc_hint.png instead of something like /mypath/bower_components/gold-cc-cvc-input/cvc_hint.png.

Am I doing something wrong? or should the img src attributes be fixed?
Maybe <img src="cvc_hint.png" ...> could be changed to <img src="[[resolveUrl('cvc_hint.png')]]" ...> or something like that?

polymer 2.0.0
gold-cc-cvc-input 2.0-preview

Looks like the same problem is mentioned here: #54

When we have these two inputs on the page

<gold-cc-input auto-validate card-type="{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-input>

user sometimes wants to start typing from second one. But that allows only 3 digits by default (when cardType is unknown). Maybe it makes sense to allow both 3 and 4 symbols when cardType is undefined yet?

https://elements.polymer-project.org/elements/gold-cc-cvc-input

Contrast: Please make the CVC text a bit darker so the contrast is improved.

Also, I'm not able to trigger the custom error message. When this does show, is it an announcement so the user can hear what the error is with spoken feedback?

Audit results:
[Severe] Controls and media elements should have labels (4)
[Warning] Images should have an alt attribute (4)
[Warning] Text elements should have a reasonable contrast ratio (1)
Not applicable tests (7)
Passing tests (5)

Description

The gold-cc-cvc-input icon does not become hidden when using shadow-dom on chrome.

Expected outcome

Example: Just one icon appear (Microsoft edge example).

Actual outcome

Example: Both icons appear.

Steps to reproduce

1. Put a gold-cc-cvc-input element in the page.
2. Turn on the shadow-dom flag:

    <script>
     /* this script must run before Polymer is imported */
    window.Polymer = {
      dom : 'shadow',
      lazyRegister: true
    };
    </script>

1. Open the page in a web browser.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

Invalid property is only true when user has introduced and deleted input

Expected outcome

I would expect that invalid property is always true unless the user introduces a complete cvc number

Actual outcome

Invalid is only true when cvc value is empty, but false otherwise

Live Demo

https://jsbin.com/goxarew/edit?html,output

Steps to reproduce

1. Put a gold-cc-cvc-input element in the page.
2. Introduce value 7
3. invalid is false. (IMO it should be true!)
4. Delete input
5. invalid is true

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Standard CVC input should accept CVCs with length of either 3 or 4. Right now devs have to specify "amex" in the tag to allow 4 digits.

As mentioned in a comment on #54 the demo styles are not being applied correctly.

1.0.10: https://www.webcomponents.org/element/PolymerElements/gold-cc-cvc-input/v1.0.10/demo/demo/index.html
2.0.0: https://www.webcomponents.org/element/PolymerElements/gold-cc-cvc-input/demo/demo/index.html

From @notwaldorf on January 29, 2016 23:16

From @zoechi on November 27, 2015 7:17

https://elements.polymer-project.org/elements/gold-cc-cvc-input

Copied from original issue: #33

Copied from original issue: googlearchive/polymer-element-catalog#243