HTML5 Pattern Matching and MinLength Textbox Issue - - regex

I need to combine these 2 patterns together or use them both in my <input> field
I have pattern matching to check for a valid time - which works great and the field is "NOT REQUIRED" so we will accept a blank field
pattern="([01]?[0-9]|2[0-3])[0-5][0-9]"
I also want to use this pattern to allow null values OR a max and min length of only 4 characters...
pattern=".{0}|.{4,4}"
I also have maxlength set - might be redundant
maxlength="4"
So basically I need a fixed character length (time as HHMM) of 4 characters or null - nothing in between....
I would have just been happy to use minlength but am receiving conflicting reports about its acceptance among browsers...
<input type="text" name="movie" maxlength="4" pattern="([01]?[0-9]|2[0-3])[0-5][0-9]" pattern=".{0}|.{4,4}" value='<?php echo $objResult["MOVIE"]; ?>'>

Try the following pattern:
(?:([01]?[0-9]|2[0-3])[0-5][0-9]|^$)
Which says: your pattern or an empty string (the ^$ part).
Hint: did not verify your pattern, just to give you an idea of the concept.

You have an optional digit in the first group: [01]?. It makes it possible to enter only 3 digits (leading 0 is optional).
Now, I understand you want to make the 0 obligatory and add a possibility to use an empty value. Just remove the ? quantifier from [01]? and use
<input pattern="(([01][0-9]|2[0-3])[0-5][0-9])?" title="4 digits please!" placeholder="0000"/>
The outer ()? makes the whole pattern optional (one or zero occurrences).
input:valid {
color: green;
}
input:invalid {
color: red;
}
<form name="form1">
<input pattern="(([01][0-9]|2[0-3])[0-5][0-9])?" title="4 digits please!" placeholder="0000"/>
<input type="Submit"/>
</form>
Note: HTML5 pattern attribute value is anchored by default, i.e. the whole pattern is wrpapped into ^(?: and )$. You do not have to put ^ and $ between the pattern, and even if you add an alternative as Jan did, you do not need the ^/$ around the empty value.
The regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a ^(?: at the start of the pattern and a )$ at the end).

Related

Regex match 3 characters followed by integers

I am new to regex expression and I need a regex in the following pattern:
The string must have a format of “TCK#”. TCK followed by integers.
For example, This is acceptable TCK123. This is not acceptable 123
Here is my current regex expression:
input class="form-control" required="true" type="text" name="TCKInput"
pattern="^[TCK][0-9]$">
With my current code, when the user enter TCK123, it is not acceptable, which is not what I am looking for
Change to below regex:
^(?:TCK)[0-9]+$
Demo: https://regex101.com/r/h9V7n1/1
Changes in the existing Regex you were using:
1) You were using [, ] around TCK which means regex has to match
any one of the values inside this bracket. As you have to match TCK
as it is, change it to (, )
2) You didn't mention + after [0-9] which means exactly one
occurrence will be matched. However, if you will mention +, it will
match one or more occurrence
If you want all 3 letters: TCK and then at least one or more digits after it, then try this:
^TCK\d+$
If you use [TCK] that will only accept one T, one C, or one K
Demo
This Demo sends to a live test server, so a successful submission of data will result in a response from said server
<form id='main' action='https://httpbin.org/post' method='post'>
<input class="form-control" required="true" type="text" name="TCKInput" pattern="^TCK\d+$">
<input type='submit'>
</form>

Angular2 form validation check for number

I am having a problem verifing the the password entered in my angular 2 form contains at least one number in it. The other validators work its just this pattern one. the regex I am using I got from
Regex: Check if string contains at least one digit
Password:
<div *ngIf="signUpForm.controls['password'].invalid && signUpForm.controls['password'].dirty">
<small *ngIf="signUpForm.controls['password'].errors.minlength">
Please enter a minimum of 6 characters
</small>
<small *ngIf="signUpForm.controls['password'].errors.maxlength">
Password cannot exceed 15 characters
</small>
<small *ngIf="signUpForm.controls['password'].errors.pattern">
Must contain digits
</small>
</div>
inside my form I have the following validator and specifically the pattern I want is to check if the string entered contains a number
"password":["", [
Validators.required,
Validators.minLength(6),
Validators.maxLength(15),
Validators.pattern('/\d')
]
]
The errors.patters ngIf never goes away even if there are numbers in the field, not sure what I am doing wrong. My other pattern validators for other fields work.
How about Validators.pattern('\\d+')?
If I understand this correctly, you would need to provide a backslash (not forward slash) to escape the backslash.
Written as a regular expression literal this would look like /\d+/, but I don't think Angular 2 supports those.
UPDATE If that's not working then it must be either something with your setup or a bug in Angular 2. I don't use Angular 2 personally so hard to say but you can see the regex itself is fine:
const regex = new RegExp('\\d+', 'g')
console.info('hiwefwe883290awefoijwfe8382jfwef'.match(regex))
Your pattern \d will only work for a single digit. You need to add a quantifier.
\d+
That will match one or more digits but not a blank value.

Regex not working in HTML5 pattern

So I have this regex intended to let pass all text but those that contain as initial chars the "34" sequence:
^(?!34)(?=([\w]+))
The regex is working fine for me in https://regex101.com/r/iN1yN3/2 , check the tests to see the intended behavior.
Any Idea why it isn't working in my form?
<form>
<input pattern="^(?!34)(?=([\w]+))" type="text">
<button type="submit">Submit!</button>
</form>
The pattern attribute has to match the entire string. Assertions check for a match, but do not count towards the total match length. Changing the second assertion to \w+ will make the pattern match the entire string.
You can also skip the implied ^, leaving you with just:
<input pattern="(?!34)\w+" type="text">

Validate <input type="number" /> with AngularJS and Pattern/RegEx

I have a input of type number, and I want to make sure it only accepts a number. I can do this fine on the Server side, but with AngularJS I can not get it to work.
Here's the code:
<input type="number" ng-pattern="/[0-9]+/" name="numOfFruits" ng-model="basket.numOfFruits" />
I suspect this has something to do with the pattern I am supplying [0-9]+ basically I only want numbers in this text box, anything that is not made up of the numbers 0 to 9, I want the input invalid.
At the moment, my input field sees this aa23423 as valid input!
You need to use anchors:
/^[0-9]+$/
^: Start-of-line anchor.
[0-9]+ One or more numbers between 0 and 9.
$: End-of-line anchor.
So this matches the start of the string, then it matches the one or more digits, after that it looks for the end-of-string, so it matches a string containing only numbers and nothing else.
Otherwise, /[0-9]+/ will match only a part of aa23423, more accurately the number 23423 and thus will give you valid.
Here is regexp to validate floating point numbers, both positive and negative:
/^-?[0-9]\d*(\.\d+)?$/
Use this regexp in 'text' input, example:
<input type="text" ng-model="score" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" required/>
Pattern don't work for input with type="number".
You can use type="text" and than convert value to number
Try defining your regex as a scope variable
In the controller, it worked for me.

Angular ng-pattern does not check upper character limit of my regular expressions

I am just starting to test out ng-pattern with some regular expressions that I have used in non-Angular projects and have worked fine. But using ng-pattern they don't seem to work. For example I have this regular expression that successfully checks for a string of 6-20 characters with at least 1 alphabetical and 1 numeric character :
"^.*(?=.{6,20})(?=.*\d)(?=.*[a-zA-Z]).*$"
However, in my Angular example below it checks everything successfully except it is not triggered when the string goes beyond 20 characters :
<div class="controls">
<input type="text" ng-model="user.Password" id="Password" name="Password" title="Password" required ng-pattern="^/.*(?=.{6,20})(?=.*\d)(?=.*[a-zA-Z]).*$/" />
<span ng-show="form.Password.$dirty && form.Password.$error.required">{{'_PasswordRequired_' | i18n}}</span>
<span ng-show="form.Password.$dirty && form.Password.$error.pattern">{{'_PasswordLengthAndAlphanumeric_' | i18n}}</span>
</div>
Is there some error I am making in the syntax, or is there some other reason this is not working?
You're missing an end anchor, and you have one .* too many (at the start):
^ # Start of string
.* # Match *any* number of characters
(?=.{6,20}) # *Then* check that 6-20 characters follow
<snip>
.* # *Then* match any number of characters anyway
$ # until the end of the string
This would work:
"^(?=.{6,20}$)(?=.*\d)(?=.*[a-zA-Z]).*$"
But it would be easier (and more obvious) to do the length check outside of the lookahead anyway:
"^(?=.*\d)(?=.*[a-zA-Z]).{6,20}$"
(which in turn makes me ask why you're imposing such a low upper limit? My KeePass-generated passwords are usually at least 30 characters in length, for example)