Does anyone know how to set multiple error messages per input in paper-input-decorator?
Or another work around?
<paper-input-decorator label="First name" error="Field Required" floatingLabel>
Related
im currently trying to optimize my forms on my Webpage. The HTML Validator gives me the following error:
The autofill field name “postal-code” is not allowed in this context.
I dont know why, since it does what it should. The autofill inserts the Postal-code. Here is the Element:
<td><input type=number name="changeZip" min=00000 max=99999 autocomplete="postal-code"></td>
This Element has same Error:
<input class="login" type="number" name="txtZip" value="" required max="99999" min="00000" placeholder="Postleitzahl" autocomplete="postal-code"/>
Why isnt it allowed here according to the Error-Message? I dont find anything in Google for this.
Thanks.
The type attribute needs to be "text". Some countries use a combination of letters and numbers for their postal code.
Therefore, your input element should be
<input type="text" name="changeZip" minLength="5" maxLength="5" autocomplete="postal-code">
I'm new to angular5 and spring and I need help with angular communication with database.
I need to make user registration, and for it I used auth0 (it's basic registration with just email and password), now I need to collect more data about user (email, name, city, phone, etc) and write it into database.
I want to use the email used for registration (i don't want to make user have to repeat it) and just pass it to the database. I can get the email used in auth0 (in my code i place it in this.userEmail, for examples below), but I dont't know how to pass it further through html part.
This is the example how I made input for user's name and it works fine. I tried to make similar for email, but it won't work and I don't get why nor how I should actually do it... help please
<label>Name:</label>
<mat-form-field>
<input matInput type="text" placeholder="Name"
[(ngModel)]="user.firstName" name="firstName" #name>
</mat-form-field>
and this sad try:
<label>E-mail address:</label>
<mat-form-field>
<input matInput type="text" placeholder=""
[(ngModel)]="user.email" value="{{this.userEmail}}" name="email"
disabled #name>
</mat-form-field>
also, i know this above is totally worng, ngModel and value of input field put like this won't work, but i wanted to (maybe) describe better what I wanted to achieve :)
and i know i could use rules in auth0 for collecting more data about user, but for certain school's conditions we are restricted to this way :/
component.html
<mat-form-field>
<input matInput [ngModel]="user.email" name="email" disabled>
</mat-form-field>
component.ts
ngOnInit() {
this.user.email = this.userEmail;
}
I would also consider not showing the email input at all. After all, if the user has already given you the email, why confuse them with this disabled input?
I'm using Polymer with Chrome 63.0.3239.108 (updated this morning) and I got some new errors while launching my webapp:
[DOM] Found 3 elements with non-unique id #input
Here's my code :
<div class="card-content" on-keypress="_keyHandler">
<paper-input id="login" label="[[i18n('uid')]]"></paper-input>
<paper-input id="pwd" label="[[i18n('pwd')]]" type="password"></paper-input>
<paper-input id="server" label="[[i18n('server')]]"></paper-input>
</div>
Yeah, <paper-input> elements have the same id, but what can I do to remove this console error?
Thanks a lot
I had same issue when i was using angular 5.
I put "name" attribute into my tags and it fixed.
Like:
<input type="text" [(ngModel)]="user.userName" name="loginUserName" >
I had similar problems. Few days agonotwaldorf, the Polymer staff paper-input developer, closed a connected issue, releasing paper-input 1.2.0 on GitHub
So update your bower.json
with
"paper-input": "1.2.0",
or even better
"paper-input": "~1.2.0",
(that follows up possible patch releases)
Hoping have been useful ;-)
At this moment I use Tomahawk20 (v1.1.14) in Tomee (v1.7.4) for my input fields in the form:
<t:inputText id="email" value="#{bean.klant.email}" maxlength="255" size="50" readonly="#{bean.aktie.readonly}" />
The #{bean.aktie.readonly} returns true or false. Tomahawk takes care of the setting of the readonly attribute.
Now I want to change to bootstrap.js. Here I can use the normal <input /> tag but the setting of the readonly causes me trouble. I searched the internet but could not find a solution. On one site they proposed to use a ternary test (${bean.aktie.readonly?'readonly':''}):
<input id="email" type="text" class="form-control" value="#{bean.klant.email}" maxlength="255" size="50" ${bean.aktie.readonly?'readonly="readonly":''} />
This however gives me the error:
javax.servlet.ServletException: Error Parsing /viewMetadata/bean/detail.xhtml: Error Traced[line: 99] Element type "input" must be followed by either attribute specifications, ">" or "/>".
What is the simplest way to achieve this?
<input> is not a JSF tag, which is what the problem is. You must use h:inputText http://www.tutorialspoint.com/jsf/jsf_inputtext_tag.htm
You're also missing some quotations. Try this:
<h:inputText id="email" styleClass ="form-control" value="#{bean.klant.email}" maxlength="255" size="50" disabled="${bean.aktie.readonly}" />
By the way, if you're interested in using Bootstrap with JSF, take a look at: http://www.bootsfaces.net It'll make it incredibly simple to write BootStrap pages that look awesome.
EDIT
Be sure to see the first comment, you may be able to do this a different way
I have started trying to learn and use Polymer elements in our site. I need to only allow the users to put 4 numbers for a year so I wanted to have a maxlength="4" in my paper-input, but it would not work and keeps going over my maxlength limit.
<paper-input floatingLabel label="Please add the year in the format YYYY" name="birth_date" type="number" maxlength="4" char-counter error-message="numbers only"></paper-input>
However, when I put the example from paper-input-container with maxlength="4":
<paper-input-container>
<label>Your name</label>
<input is="iron-input" maxlength="4">
</paper-input-container>
This seems to stop the input at my maxlength, but it also uses much more code then I would like to use, as I have a decent amount of form questions for a user, as well as the fact that from the documentation and examples I have looked at, I do not see why my maxlength is not working in the <paper-input>. Am I missing something with the paper-inputs or am I using them wrong?
Also, if anyone knows of any good guides to form validation with polymer elements that would be much appreciated as well. Any advice is much appreciated for my issue.
For type="number", the properties max and min can be set. To allow the user to enter only 4 characters you can set type="string" and then validate that numbers are entered using the auto-validate-pattern property.
<paper-input label="only type numbers (auto-validate)" auto-validate pattern="[0-9]*" error-message="numbers only!" type="string" maxlength="4"></paper-input>
I found the demo examples for paper-input here useful to troubleshoot.