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 :-)
Related
is there any way you could replace typed characters from input type="text" by stars like the input type="password", i searched but didnt find anything yet, can it be done with css?
Let me know thanks!
generally I think it is recommended that you use type="password", is there any reason that this wouldn't work for what you are requesting?
You could set up a javascript function to call .OnKeyPress() (or jQuery's .keyup()) to take an action after each key press, but this is not advised at all as the implementation would be unnecessarily convoluted.
There is a fiddle on here that might help, but +1 for App-Devon too for type=password !
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}"
I'm developing a browser and I want to automatically insert a string in googles search field, when loading the page. The problem is, that it has no type="text". I've seen an approach to search for an element with name="q" (that's the name of the field), but it seems to be not very elegant, since it's possible, that the name changes over time.
Does anyone has a better idea?
THX
I just checked, when I call both "google.com" and "google.at" the text field has type="text":
<input id="gbqfq" class="gbqfif" name="q" type="text" [...]>
But: Searching for an input field with type="text" is just as brittle as searching for an input field with name="q": Google might add more input fields, rename them, do even more JavaScript magic, ...
If you just want to search for stuff, you cann use the following GET request: https://www.google.com/search?q=QUERY_GOES_HERE - This is probably a lot more stable than inserting text into text fields. (HT to Ethan Brouwer who mentioned this in a comment on your question).
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.