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]+$/
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.
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.
I'm supposed to be accepting only usyd.edu.au email addresses. The validation works, but it also works with usyd.edu.a emails. I want it to accept only when complete .au is entered. The pattern I have which works so far is:
input type="email", placeholder="Email" name="txtName" id="txtEmail" pattern="[a-z0-9._%+-]+#[usyd]+\.[edu]+\.[au]"/>
Close but not right.
[a-z0-9._%+-]+#[usyd]+\.[edu]+\.[au]
[a-z0-9._%+-]+ simple enough Allow a-z or 0-9 or . or _ or % or + or -
# only allow #
[usyd]+ allow one or more of u, s, y or d. Which could just be 'u'
\. only allow .
But the suggestion from Austen is also wrong:
[a-z0-9._%+-]+#(usyd)+\.(edu)+\.(au)
(usyd)+ would allow you to enter 'usydusydusyd'
(edu)+ would allow you to enter 'edueduedueduedu'
There is no reason for the parenthesis. and you definitely do not want the '+' since that allows one-or-more.
Instead you want this:
^[a-z0-9._%+-]+#usyd\.edu\.au$
This will make sure that nothing odd exists at the beginning of the string (The '^') and that the string ends with '#usyd.edu.au' (The '$')
input:invalid {
background: red;
}
<input type="email", placeholder="Email" name="txtName" id="txtEmail" pattern="[a-z0-9._%+-]+#usyd\.edu\.au"/>
You almost got it! If you change the square brackets [] in the last 3 places in your regex to be round brackets () then it will work as expected.
ex: [a-z0-9._%+-]+#(usyd)+\.(edu)+\.(au)
Here's why:
[au] will match a SINGLE character found within the brackets. (Either an a, or u)
(au) will match EVERYTHING found inside the brackets. (Exactly au)
What the difference between 2 name of input ?
OK, Normal i usually use this format name="xxxxxx"
<input type="text" name="xxxxxx"/>
But, today i see name format that i not understand name="xxxxx[]"
<input type="text" name="xxxxxx[]"/>
what is [] in name="xxxxx[]"
With this format xxxxx[] the variable $_POST['xxxxx'] is an Array when form is posted.
For example, is possible to iterate by the $_POST['xxxxx']:
<?php
$data = filter_input(INPUT_POST, 'xxxxx');
if(is_array($data)) {
foreach($data as $value) {
echo $value;
}
}
?>
In HTML5, the name attribute is just a string (without any special syntax). The only thing that can have a special meaning are the _charset_ and isindex strings. Thus square brackets themselves are nothing special.
However, the authors of programming languages or libraries that interact with HTML forms some times decide to define special syntaxes. That's the case of the PHP server-side language, where paired brackets in form element names are used by the language to automatically define variables of array type. See How do I create arrays in a HTML ? for further details.
(It's possible that other langs make use of similar conventions but I don't really know.)
Nothing, it just another name, may be something auto generated or someone use for a purpose in mind.
This is mainly done because of server side frameworks.
With PHP, for instance, if you had
<input type="text" name="address[firstline]">
and
<input type="text" name="address[secondline]">
and submitted the form, in your PHP code on the server you'd retrieve a single address object from the request and it would have the keys firstline and secondline on it.
you can still query using jQuery:
$('input[address\\[\\]=firstline]')
The reason for needing two backslashes is because a single backslash is interpreted as a JavaScript string escape character, so you need two to specify a literal backslash, which provides the escape character to the selector...