I am using angular 4 for my front end.My project consist of many components and each component consist of forms and inputs.
Is there any way to convert each and every letter user entered to my input fields to capital letters.
I think previous answers will not match my project as I'm having hundreds of input fields I am looking for a easy way to convert every inputs to capital when the user enter.
Thanks in advance
While binding the expression in view you can use toUpperCase() function
Try this
<hello name="{{name.toUpperCase() }}"></hello>
<input type="text" [(ngModel)]="name">
Here is the working solution
You can use simple css code to convert it.
Selector{
text-transform:uppercase;
}
Related
I am developing a view using html5, I want to validate a VIN field with some particular regex pattern,
So I used data-val-regex-pattern to achieve this.
My validation is to not allow the user to enter i,o,q,I,O,Q he can enter anything in a-zA-Z0-9
So I have written the regex as ^[a-zA-Z0-9&&[^iIoOqQ]]$this regex is not working.
Not working mean when ever I enter ghtygfrt9090 it is saying invalid.
Below is the code:
<input type="text" maxlength="17" data-val-regex-pattern="^[a-zA-Z0-9&&[^iIoOqQ]]$" data-val-regex="VIN is not valid">
Please help !!
The pattern you tried ^[a-zA-Z0-9&&[^iIoOqQ]]$ does not have a quantifier for the character class and if supported will match only a single occurrence of the listed.
Repeating it would look like ^[a-zA-Z0-9&&[^iIoOqQ]]+$
In some regex engines, you could use character class intersection using $$
If it is not supported, you could make use of a negative lookahead:
^(?!.*[iIoOqQ])[a-zA-Z0-9]+$
Regex demo
Another option is to update the ranges excluding the chars
^[a-hj-npr-zA-HJ-NPR-Z]+$
Regex demo
I'm working on a HTML form and and I have this input tag for a phone number.
I would like the phone numbers inserted in the textbox to match the following format: +389-xxx-xxx , such as e.g. +389-111-222 .
but I've struggled so far to make the pattern attribute.
Can someone give me some suggestions to validate the input using only HTML5? Tnx <3
How about the following pattern:
<input type="text" pattern="(\+389)[\-]\d{3}[\-]\d{3}">
The pattern looks for +389 followed by two consecutive - and 3 digits.
I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.
<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>
I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).
Edit
May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?
The pattern field uses regular expressions. Try:
pattern="[A-Za-z]+"
For the national ID you could use:
pattern="A[0-9]{6}"
I'm working on a simple check for my input fields. I got 3 places where I'm validating user-input: javascript regex, html pattern and php regex. The Javascript and PHP part work fine, but my HTML pattern somehow returns an error for every input except blank. I tested it on regexpal.com (regex tester) and it works perfectly fine there, so I reckon I must be doing something wrong.
Here's my regex:
/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/
I'm trying to allow users to input the following:
Alphabetic characters, including capitals
Numeric characters
Puncation: exclamation(!), question(?), comma(,) and dot(.)
Spaces
Here's how I implement it:
<input type="text" id="name" name="name" aria-required="true" pattern="/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/" value="loaded value from db">
Please note: I'm allowing 0 characters to be entered because I will check it with PHP, and if the input field(s) is/are empty, a pre-set value will be written to the database.
Basically it should allow users to enter general words or sentences, but somehow it doesn't allow anything. The only way I don't get an "error" is when I leave the inputfield blank. What am I doing wrong? Is my regex wrong? Am I not implementing it correctly? I can provide more code if necessary.
Help is much appreciated!
Thanks in advance.
Try removing the forward slashes (/) from the input's pattern attribute.
My application has a form with 2 submit buttons:
<input name="rating" class="Show" type="submit" value="Show answer">
<input name="rating" class="Skip" type="submit" value="Skip">
However I noticed some errors in GAE logs:
ValueError: invalid literal for int() with base 10: 'Voir la r\xe9ponse'
ValueError: invalid literal for int() with base 10: 'Sauter'
Basically it's the value of the form buttons, in French, whereas my app is in English.
How can a user change the form submit values? For example with google translate etc?
How can I handle this?
Yeah, that'll be Google Translate. It translates the text on the buttons as well. If you really want to prevent this, you'll have to make sure Google can't translate the text on the button. Note: these answers are not semantic HTML. Not sure if there's a cleaner method, I hope so, but this is what first springs to mind:
Method 1: hidden inputs
Since you're using buttons anyway, you might as well have them submit something. Put each button in its own form, add a hidden field, and use the value of the hidden field to determine what page to load next.
Downside: a lot of extra html, not really maintenance-friendly
Method 2: numeric value
Change the value of the buttons into something numeric, like 0 and 1. Hide the button's value with CSS and give the button a background image that shows the text. Load the page based on the numeric value.
Downside: very bad accessibility (screen readers, etc.), text on button won't be translated.
I really do hope there's better alternatives I haven't thought of yet.