Currently, I have the following input defined on an HTML page inside an Angular 9 app:
<input type="text" formControlName="amountToWithholdInput"
onkeyup="this.value = this.value.replace(/[^0-9.%$]/, '');">
As a person types, it automatically removes any character that isn't a number, a $, a % or a decimal.
How do I modify this so it will remove a % if they've already typed a $, and vice-versa (remove the $ if they've already typed a %)? In other words, it needs to check and see if a particular character exists, then remove the "opposite" character if they try to type that.
Or am I going about this all wrong? Is there some other way to do this that I haven't thought of?
Essentially you are asking your users to insert a numeric value with an optional fractional part and a trailing $ or % sign and everything else should be dropped on key input.
So, we could use a regex that matches any string but keeps the fractional numbers and a single sign in an optional group and then replace the original string only with that group $1 while the remainder in the full match gets dropped. Try it:
<input type="text" formControlName="amountToWithholdInput"
onkeyup="this.value = this.value.replace(/^((?:[0-9]+\.?[0-9]*)[%$]?)?.*/, '$1')">
To make this work we need to ensure the inner regex can also match an incomplete version of the final string, i.e. the number, dot, and sign part need to be made optional as well. If you need a more specific (e.g. only two fractional numbers) or different order (e.g. dollar sign first, percent last) we can adjust the inner regex easily but the same concept can be applied, i.e.
<input type="text" formControlName="amountToWithholdInput"
onkeyup="this.value = this.value.replace(/((?:[0-9]*\.?[0-9]{0,2}[%]?)|(?:[$]?[0-9]*\.?[0-9]{0,2}))?.*/, '$1')">
Here, the order of the sub-patterns becomes important as we want to match only one sign and only in a specific position.
Related
As a user is typing their new password, I want them to be able to see if their password meets the requirements or not. I have a Regex pattern set up inside the input tag, and if the requirements aren't met, the input box is outlined in red and the form can't be submitted. This looks like:
<input type="password" pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.[!###$%&?]).{8,32})" placeholder="Password" required />
I adapted that pattern from here. I have it so that the user's password must contain 8-32 characters, one uppercase letter, one lowercase letter, one special character (!##$%&?), and one number, and that works fine. However, I also want to exclude some special characters from the input, for example, the semicolon (;). I have tried adding (?!.[;]) like so:
((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.[!###$%&?])(?!.[;]).{8,32})
This breaks the entire pattern, though. Could someone explain what I am doing wrong and how I can fix it? Or would it be better to do this manually by using a Javascript listener to check if the password meets the requirements each time the user does a keypress?
Try with:
((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!###$%&?])(?!.*[;]).{8,32})
Fine-tunings from your regex:
Added back an asterisk * to the positive lookahead for symbols list [!###$%&?]
Added back an asterisk * to the negative lookahead for symbol [;]
You need an asterisk * after the dot . in order to allow matching of multiple characters (by *) for any character (by .). Otherwise, your regex allows only ONE single character before the symbols to include and exclude.
Im trying to make a pattern that will allow input such as SB 0023467-01 or ST 0023467-02
<input type="text" name="surat_beranak" pattern="[S]+[B\s]+[0-9]{7}+[-]+[0]+[^0-1]"
oninvalid="this.setCustomValidity('Format SB 0029384-01')"value="<?= $surat_beranak;?>"
class="form-control" placeholder="Enter Surat Beranak Number" required>
This is my current input pattern, but it's not working as intended. I need help where the pattern will allow only S as the first letter, then B or T as the second letter, then have a space after. Then there will be 7 numeric digits followed by a dash and a number, 0 then 1 or 2
You're using + between every character, which allows a character to be repeated many times. It is the equivalent of using {1,}. [0-9]{7}+ is invalid.
You're using square brackets, allowing different characters to be used in a same place. A good place to use these would be for the beginning: S[BT] would allow SB or ST. There is no need to wrap single characters with these brackets.
Your current pattern ends with [^0-1], which means "every character except 0 and 1". It goes against your goal of having "01" or "02" at the end.
Your pattern, in HTML, would be S[BT] [0-9]{7}-0[12]. If you're using this pattern anywhere else, you should wrap it between ^ and $, in order to only allow the input you want, and nothing else.
In the future, please use regex testers in order to test your pattern. Example with the working pattern and a few input examples.
i'm not good in html pattern validation.
I have this problem, my input text is valid only : min 3 max 30 chars,
white space at first and at end of the string is not allowed, is allowed white space between one word and another is allowed, is allowed A-Za-z, first char of word it must be Uppercase and the others word it must be Lowercase.
Thanks.
--UPDATE--
input#name
Valid Examples:
'Mario Giovanni'
'Maria'
'Jacopo Karol Pio'
'Jacopo K'
Invalid Examples:
' Mario Giovanni'
'Mario Giovanni '
' Mario Giovanni '
'Mario Giovanni'
'maria'
'mAria'
'Antonio mario'
If you need pure regex then this should work for you:
<input type="text" pattern="(?=^.{3,30}$)^[A-Z][a-z]*(?: [a-z]+)*$">
(?=^.{3,30}$) - use a positive lookahead to make sure we have between 3 and 30 chars
^[A-Z] - require start with a capital letter
[a-z]* - optionally allow lowercase letters to follow
(?: [a-z]+)* - optionally allow a repeating group of a space char follow by one or more letters
$ - end of string anchor
You will want to use a Regular Expression pattern to check whether the input is valid or not, as well as the maxlength and minlength attributes to ensure that the input is between 3 and 30 characters.
Regarding the RegEx pattern, we must:
Start at the beginning of the input: ^
Verify that the first character is between A and Z: [A-Z]
Verify that the following characters before the last one are lowercase letters or spaces: [a-z ]*, where * indicates that there might be multiple characters matching that part of the pattern; if you only want to allow one space between word, then use ([a-z]* ?)
Verify that the last character is a lowercase letter: [a-z]$, where $ indicates the end of the input
Below is the code I would use.
<input type="text" minlength=3 maxlength=30 pattern="^[A-Z][a-z ]*[a-z]$">
Looks like what you wait is:
<input type="text" pattern="(?=^.{3,30}$)^[A-Z][a-z]+( [A-Z][a-z]+)*$">
Notice this is being validated in the user browser, and doesn't configure a secure input validation. You should check the input again at server-side before using it anywhere.
I am trying to validate a username field. The field must have numbers, letters and no special chars.
This pattern="[A-Za-z0-9]" stands for username with numbers and letters.
What the pattern should be?
Your pattern stands for a single uppercase-char, lowercase-char or number.
The pattern you want looks like this:
/^[a-z\d]+$/i
Explained:
^ - from the start of the string (or line with the m flag)
[ - start character class
a-z - range of characters from a to z
\d - the same as 0-9 (any digit)
] - close character class
+ one or more
$ - end of string (or line with the m flag)
Then we have the flags outside the actual regexp // itself.
We're using the i flag which stands for case insensitive.
Cheatsheets / Tools
http://regexr.com/
http://rubular.com/
try this
<input type="text" class="form-control" name="username" onkeyup="if (/[^|a-z0-9]+/g.test(this.value)) this.value = this.value.replace(/[^|a-z0-9]+/g,'')">
I don't know if this can be done in raw HTML (doubt it), so you'll need some javascript. You can have a function called on the "onchange" attribute if you like, so the element would be like:
<input id="username" type="text" onchange="validate()" name="name" value=""/>
The javascript function would then just access the element, get the value, and check what is in it, like so:
function validate() {
var name = document.getElementById("username").value;
//do checking here however you like (regex, iteration, etc.)
}
BUT, this needs to be done server side. You can do it client-side if you really want to, but it MUST be done on the server side, in any case. I assume you meant on the client side since you tagged the question with HTML, rather than a server side language.
This should work to test a string for only characters and numbers with javascript.
/^[a-zA-Z0-9]+$/
I am using <input type=number> where I place values using Javascript. I'd like to format these numbers to have always one decimal. Chrome stubbornly strips out of trailing zero from the numbers if they have any e.g. 1.0 -> 1.
Apparently I should set pattern attribute of the control. However I am not sure what kind of values Chrome accepts here and what would be the correct pattern for formatting numbers.
pattern is used to specify a regular expression that any value the user supplies should match. Something like pattern='[0-9]+\.[0-9]' should specify 1 or more digits, a decimal, then 1 digit. You might also want to set the step size to 0.1 (step=0.1) to force only 1 decimal. I don't know if chrome will respect the pattern and size attributes or not, but that is how to specify them.