polymerelements / gold-email-input Goto Github PK
View Code? Open in Web Editor NEWAn input element that only allows emails
Home Page: https://webcomponents.org/element/PolymerElements/gold-email-input
An input element that only allows emails
Home Page: https://webcomponents.org/element/PolymerElements/gold-email-input
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
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?
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.
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
valid address
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'sinvalid
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"> </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
...
<dom-module>
...
</dom-module>
<script>
...
</script>
...
<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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.