Polymer with javascript - javascript

I'm trying to control my polymer text box with input type text, this textbox is being used to receive a users Phone number
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!">
<!--Text area to obtain phone number -->
<input type="text" is="iron-input" min="10" maxlength="10" size="10"/>
</paper-input>
what i'm trying to do with this is actually use javascript with polymer to limit this text box input to simply just numbers with a minimum input requirement set by me.
I had a couple of rough attempts at it but i'm fairly new to polymer so none of the approaches i took worked.
any tips would help !
thank you !!

<paper-input> is not designed to wrap a regular <input /> element. You would use <paper-input-container> for that.
In your case, use the paper input to limit characters directly:
<paper-input
name="phone"
id="phone"
value="{{Request::old('phone')}}"
label="Phone Number"
aria-disabled="false"
class="x-scope paper-input-0"
style="text-align: left"
required auto-validate error-message="Phone Number cannot be Blank!"
minlength="10"
maxlength="10"
size="10">
</paper-input>

Related

How do I set input field size so that after entering 4 words in input it jumps to the next field?

This is my code. I'm using stripe code fields
Card number
<label>
<span style="width:151px;">Card Number</span>
<input type="text" size="20" class="field" data-stripe="number" placeholder="4242-4242-4242-4242"/>
</label>
CVC number size 3
<label>
<span style="width:151px;"> CVC</span>
<input type="text" size="3" class="field" data-stripe="cvc" placeholder="CVC"/>
</label>
Month size 2 and year 4
<label>
<span style="width:151px;">Expiration(MM/YYYY)</span>
<input type="text" size="2" class="field" data-stripe="exp-month" placeholder="MM"/>
<input type="text" size="4" class="field" data-stripe="exp-year" placeholder="YY"/>
</label>
Not an exact answer to your question, but if possible, I'd recommend that you switch to using Elements (Stripe.js v3) instead of Stripe.js v2.
Not only will it take care of formatting the card number automatically, it will also make you eligible for PCI SAQ A, while with Stripe.js v2, you'd fall under the more cumbersome PCI SAQ A-EP. (More information about this here.)

Showing numeric keyboard issue in IOS , Ionic

I have used input type = "number" for displaying only a numeric keyboard. It works fine in android, but not in iOS. Is there any other way to do that?
What I actually want is an input box that only allows 0 to 9 and the max length of input is 1.
Please let me know. Thanks in advance.
<input type="number" maxlength="1"/>
You can use pattern: pattern="[0-9]*"
So: <input type="number" maxlength="1" pattern="[0-9]*" />
<input type="text" pattern="\d*">
Or you can use a plugin
https://market.ionic.io/plugins/ion-digit-keyboard
Use type="tel"
<input type="tel" />

AngularJS ui-mask Adding a MAX and MINIMUM for a currency

I am using the official AngularJS UI-Mask https://github.com/angular-ui/ui-mask and trying to figure out how I can create a mask for currency USD.
I want the user to be able to put $00.01 to like $9,000,000.00 or whatever the desired max is.
I currently have: <input type="text" ng-model="greeting" ui-mask="$99.99" class="form-control input-lg" style="width:50%" />
That limits me to $99...
Here is a live demo: http://plnkr.co/edit/5ErV11uGVxJFmD24K2jk?p=preview
You can use input number.
<input type="number" min="0.99" max="9000000.00" ng-model="greeting"
class="form-control input-lg" style="width:50%" />

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.

Getting Search Keyboard on iPhone using PhoneGap

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"
Use
<form> ...
<input type="search" /> ...
</form>
The <form> is a must.
(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)
The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.
See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
Update:
The following input type works as expected:
There are some important things that you have to keep in mind:
It only works on iPhone OS 3.1 +
The input tag MUST be inside a tag.
Also, it is worth noting the following tags as well:
<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/>
<br/>
<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>
<!-- display an email keyboard -->
<label for="tiEmail">Email:</label>
<input type="email" id="tiEmail"/>
<br/>
<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>

Categories