polymerelements / gold-email-input Goto Github PK

Description

It isn't currently possible (AFIK) to add icons/buttons etc. to the element in the same way as with a vanilla paper-input, e.g.:

<gold-email-input>
  <iron-icon icon="email" prefix></iron-icon>
</gold-email-input>

Is this a case of adding a <content> element in the right place?

Happy to give this a go if anyone thinks it's relevant. Thanks!

If I create a gold-email-input and set the auto-validate to false, (auto-validate="false") it still autovalidates! This works differently than say a paper-input that I can actually set auto-validate="false" within the html, and it doesn't autovalidate. However, if I get rid of "auto-validate" in gold-email-input it will set it to false as it's default.

Even if I set the gold-email-input attribute "auto-validate" to "false" in JavaScript, it has no effect.

Please require there to be a character preceded by DOT after a character, after the @ symbol

[email protected] = valid
j@J = not valid

or provide some notes as to how to modify your regex being used in the validation code

thank you

When i put some mail like xxxx@a the error message from the input is gone and the validate() function says that is a valid mail. Should't validate the mail have a dot after the @?

added autocapitalize="none" as emails never need to be capitalized

  <input is="iron-input" id="input"
    ...
      autocapitalize="none"
     >

this does assume that no one wants capitals, could make it optional

      autocapitalize$="[[autocapitalize]]"

I've committed a change to my fork, if you want it, but I guess its easy enough to add in the next round

MrAntix/gold-email-input@082e09e

The bower.json since the v1.0.4 tag claims to depend on any v1 PaperInputBehavior. This is not the case since _handleAutoValidate is not defined until v1.0.12 of the behavior. (I noticed this by using v1.0.10.)

An update of the dependencies or a fallback solution should fix this.

Why?

Because say a user enters "[email protected] ". This shows up as invalid, but it's unclear what is happening.

Using trim() first will make the above sample valid, and is better UX.

I'm fairly certain this works for all gold-inputs in terms of philosophy -- trimmable whitespace is never going to be desired.

The hidden attribute (https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden) fails to hide a gold-email-input because of :host { display: block; }. Should this and other elements include :host([hidden]) { display: none; } to preserve the correct behavior?

<gold-email-input name="email" label="Email Address" on-value-changed="_emailChanged" auto-validate required></gold-email-input>

it('should reset to default message on change', function(done){
            emailField.errorMessage = "foo";

            emailField.addEventListener('value-changed', function(e){
              expect(emailField.errorMessage).to.equal(defaultErrorMsg);
              done(); 
            });

            emailField.value = 'a';
});

The following test fails for:

done() called multiple times
Suite. at signup-form-test.html:42
Suite. at signup-form-test.html:27
Suite. at signup-form-test.html:25

Audit results:

[Severe] Controls and media elements should have labels (5)
[Warning] Text elements should have a reasonable contrast ratio (4)
Not applicable tests (9)

Contrast: hint text and "email" are too light.

Windows / Firefox / NVDA: Again, text entry fields say "has autocomplete". Is this true?

I am stuck on Polymer 1 because of this dependency. Would really love to see an update. Thanks

Should the first case below be flagged as valid?

• test@here (valid)
• test@here. (invalid)
• [email protected] (valid)

The unit tests are not passing. The encountered error is this._parentForm.fire is not a function.

The reason is the inheritance of the Polymer.IronFormElementBehavior.

I removed it and all the unit tests was successful. 🆗

PS: Sorry for the term inheritance, I come from the Java world.

Description

address with tailing dot (e.g. [email protected]. ) should be valid. As long as it is valid in DNS system.
http://www.dns-sd.org/trailingdotsindomainnames.html

Expected outcome

valid address

Actual outcome

invalid address

I took interest in this SO question: http://stackoverflow.com/questions/31643650/polymer-1-0-input-validity-observer and I can certainly imagine use-cases to observe input validity.

Given that I have a template

<gold-email-input id="foo" bind-value="{{myEmail}}" auto-validate
                  error-message="Invalid email address" invalid="{{isInvalid}}">
</gold-email-input>

and prototype

properties: {
  myEmail: String,
  isInvalid: {
    type: Boolean,
    observer: "isInvalidChanged"
  }
}

gold-email-input extends Polymer.PaperInputBehavior, and according to this,

/**
* Returns true if the value is invalid. Bind this to both the <paper-input-container>'s
* and the input's invalid property.
*/
invalid: {
type: Boolean,
value: false
},

the invalid property returns true if the value is invalid. In this case, is there a reason why notify: true is not set?

Similarly, gold-email-input uses paper-input-container and it is not set to notify upwards as well.

Lastly, in gold-email-input.html, the invalid attribute is set to a one-way bind from host to paper-input-container.

If I make the above 3 changes, the invalid property becomes observable. Is this a bug?

Hopefully we can have a 2.0-preview branch for this element as well, thanks.

I'm using the gold-email-input element in my login view and bind the value to my stored E-Mail address. This is the DOM:

<gold-email-input id="email" name="email" auto-validate="" autocomplete="true" required="" class="style-scope aw-login" aria-disabled="false">
    <paper-input-container id="container" class="style-scope gold-email-input x-scope paper-input-container-0">
       <div class="floated-label-placeholder style-scope paper-input-container">&nbsp;</div>
    <template is="dom-if" class="style-scope paper-input-container"></template>
    <div class="input-content label-is-floating is-invalid style-scope paper-input-container">
      <label class="style-scope gold-email-input" id="paper-input-label-797">E-Mail</label><input is="iron-input" id="input" validator="email-validator" autocomplete="email" class="style-scope gold-email-input" required="" placeholder="" aria-describedby="" name="email" aria-labelledby="paper-input-label-797"><template is="dom-if" class="style-scope gold-email-input"></template>
    </div>
    <div class="underline is-invalid style-scope paper-input-container">
      <div class="unfocused-line fit style-scope paper-input-container"></div>
      <div class="focused-line fit style-scope paper-input-container"></div>
    </div>
    <div class="add-on-content is-invalid style-scope paper-input-container">   
    </div>
  </paper-input-container>
  </gold-email-input>

As you can see in the screenshot below, the value is set to my email address but the underline and the floating-label are red:

Do I need to trigger validation? The gold-email-input has the attribute auto-validate, autocomplete and required! Do I need to set these attributes???

It's a kind of proposal. Until now, no TLD of one char was accepted. Would it be a good idea to update the RegExp to check emails who end with minimum 2 chars ❓

In the definition file (gold-email-input.html) is absent:

on-change="_onChange"

Thanks

@notwaldorf - this is referenced from #26.

Case 1: When auto-validate=true and required=true, an empty input should be invalid.

Case 2: When auto-validate=true and required=false, an empty input should be valid.

The latest commits breaks Case 1;

Case 2 remains an issue - first enter a value, then delete it. The validity remains invalid when we expect it to become valid again, since the value is now empty.

Here is the repro: http://jsbin.com/hodeyakuzu/edit?html,output

Given the current regex the following email address is considered valid
email@example

Notice the absence of a top level domain such as '.com'. I am unaware of any instances where this would be desired behavior.

^[a-zA-Z0-9.!#$%&’*+\\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

Should be changed to

^[a-zA-Z0-9.!#$%&’*+\\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$

This elements code is not following the same standards as other elements. This elements javascript code is outside the . All other elements have javascript code inside the tags

Current code:

...
<dom-module>
   ...
</dom-module>
<script>
   ...
</script>

Expected:

...
<dom-module>
   ...
   <script>
      ...
   </script>
</dom-module>

A similar issue has been fixed for other elements like paper-fab. Please check PolymerElements/paper-fab#53 for details.

"name": "gold-email-input",
"version": "1.0.5"

https://elements.polymer-project.org/elements/gold-email-input

charCounter is referenced as in paper-input, but it is not actually implemented in this element

Tried binding to the on-change event within a custom element. The event never seems to fire. I also tired using the listeners object within my element config and the behavior was the same.

I'm using the latest version of the element and chrome.

<gold-email-input name="email" label="Email Address" on-change="_emailChanged" value={{email}} required=true auto-validate error-message="Invalid email address"></gold-email-input>


<script>
     Polymer({
          ...
          _emailChanged: function(event){
        console.log('email has changed!'); //never called
    },
       ...
     });
</script>

i tried this

<style is="custom-style">
gold-email-input {
    --paper-input-container-color: white!important;
    --paper-input-container-focus-color: white!important;
    --paper-input-container-invalid-color: white!important;
    --paper-input-container-input-color: white!important;
}
</style>

but not working inside body tag, but working perfectly inside dom-module