I have an HTML5 text field for given name (first name).
<input name="name" id="name" autocompletetype="given-name" type="text" alt="" maxlength="16" required/>
Some users put password here. Thus I want to prevent some of them by not allowing numbers. How I'll accomplish this? So, I want only English and Turkish letters plus - and ' for any case, oh and these â,Â,ê.. for any case. Better way is not to allow numbers I guess but is there such way?
I'm going to assume that you can use javascript/jQuery.
Please note that I am unsure if the letter sequence below covers only turkish letters/all turkish letters. However, it is a pretty exhaustive list of letters used in various languages.
Then:
$('#name').on('change', function(){
if(/^[a-zA-Z\- ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]$/.test($(this).val())){
$(this).removeClass('invalidField');
$(this).addClass('validField');
} else {
$(this).addClass('invalidField');
$(this).removeClass('validField');
}
});
And then use CSS to mark fields valid/invalid. (A red border for invalid fields for instance)
Related
Try check if input filed start with blank space, after testing e few hours and searching and testing a lot of patterns, found on internet, it doesn't work.
What i want: check if html5 input field start with character (no blank space), but in the text are blank spaces allowed.
At the moment the best solution i found, but it doesn't work:
<input type="text" class="naamveld" placeholder="Fullname" pattern="^\S+$" required>
Someone can help me with this 'simple' thing?
You should use a regular expression like this:
^[^-\s][\w\s-]+$
like it is explained in this question
According to your question, you said you wanted to remove all the whitespaces in the input, try this:
<input type="text" class="naamveld" placeholder="Fullname" required onkeydown="this.value = this.value.trim()" onkeyup="this.value = this.value.trim()">
If you try adding spaces at the beginning and end of the input, it will remove them.
How it works
The input has two attributes, (onkeydown and onkeyup) these functions will perform when the input receives a keyup or keydown, and will remove all whitespaces from the value of the input using this.value = this.value.trim()
If you want to learn more on how the trim() function works, you can go here.
First of all, again sorry for my bad english :-s
I want thanks everyone for all this useful info. When looking to the answers and solutions, with our help this is the solution (see pattern):
<input type="text" pattern="^\S.*$" ...>
Checked if input field started with blank space(s).
This is for me the best and simplest solution :-)
I'm aware that parsing numbers with pure CSS is impossible. But as in my case I know for certain that the input will always be in a specific way, is it possible to change the display of an input field based on the count of characters in it?
e.G. I want '123450' to be displayed as '1,234.50' - or if it were 'abcdef' it should become 'a,bcd.ef'.
So, I would like a rule that says: from right to left: after the second char display a dot, after the fifth and eight char display a comma.
Is that possible?
Example:
<input type="text" class="unformatted" value="123456" />
Should display like
<input type="text" class="formatted" vaulue="1,234.56" />
while still retaining its original value 123456.
What you're asking is not possible with pure CSS. The smallest you can go with CSS is the single HTML tag, you cannot go deeper than that.
Individual lines of text cannot be selected or altered, as they are seen as a whole by CSS engine.
With a little help from JavaScript, however, this can be easily done.
I want to use the number input type for my HTML form.
Unfortunately it only accepts real numbers, no dashes between.
Is there a way to make the number input accepting numbers like "1234-123456789" ?
I recently had the same issue. I got around it by using type="tel" instead of type="text" or type="number". By using 'tel' I was able to get a numeric only keyboard on mobile devices and still be able to use my pattern="[0-9\-]+".
Here is the code I used. I hope this is good enough for what you need. They really need to make it so that adding a pattern attribute overrides any built in pattern set by the type attribute.
<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>
Of course this will only work if all you want is dashes and possibly parentheses.
You can use a regular expression against which the value will be validated. Simply put it in the pattern attribute. You also have to change your input's type to text in order to use that.
<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num"
title="The number input must start with a number and use either dash or a comma."/>
inputmode="numeric" is your new best friend..
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#numeric
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}"
In Chrome 15, when using the element as a text field, leading zeros (e.g. 011) are removed even if the number entered does not break the validation rules (e.g. min, max). Is there an attribute to force the zero to remain in the field after it loses focus? The application for this is numeric data such as international phone prefixes.
<input type="text" pattern="[0-9]*" ...
that should do it for you. Will bring up the numeric keypad on iPhone and the nicer Android phones I've tested on.
<input type="tel"> has been introduced for this exact purpose. It's one of the new input types in HTML5.
I needed it for mobiles browsers and I used a mix of both solutions like this :
<input type="tel" pattern="[0-9]*">
On iOS, the numeric keyboard appear with only numbers available (no # or * symbols) whereas on Android phones, the "tel" is correctly interpreted but not the pattern (not yet on the few phones I have).
I guess that when android browsers will start to implement "pattern" attribute, this should work fine on android too (as the whatwg spec suggests).
Until then you will have to check for non numeric characters in your input and remove them. javascript replace(/[^0-9*]/g,'') is useful for this.
hope this helps
8 Years later...
Beware:
The answers with the usage of type="tel" don't fully solve the issue especially in the case of numeric fields where you might want to write floating/decimal numbers and other allowed characters (like +-.,).
Solution:
Consider using text input with pattern and inputmode like this:
<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">
Details:
The pattern there will help to keep leading 0s, and behave like a numeric field (with all the other allowed characters).
And the inputmode="numeric" will pull the numeric keyboard instead of the default one.
The answer WHATWG provided me in IRC was that for non-numeric (e.g. not float/int) data that is numeric in nature, text is generally the correct type of input to use. The expection is if you are using something where a specific input type (e.g. telephone numbers, dates) already exists.
input type=number should only be used for inputs that are literally numbers (int), and not data that uses numerals (such as postal codes).