I need a pattern for a student ID that must be either 7 or 10 digits long.
pattern="[0-9]{7,10}"
I got this but obviously this is between 7-10 not 7 | 10
I tried pattern="[0-9]{7|10}", that also does not work.
Any ideas?
You could use ^(\d{7}|\d{10})$"to get exactly 7 or 10 digits.
Example Snippet:
document.getElementById('textbox').onkeyup = function (){
document.getElementById('count').innerHTML = this.value.length;
};
<p>
<span>Character Count</span>
<span id="count"></span>
</p>
<form>
<input id="textbox" type="text" pattern="^(\d{7}|\d{10})$" required />
</form>
<p>Press Enter to check validation</p>
Use [0-9]{7}([0-9]{3})? instead. This sets the base of 7 digits and an optional extra 3 digits bringing up the count to 10.
Related
My number format as shown in the below:
1. 775645645 (9 digits)
2. 0775645645 (10 digits)
3. +94775645645
The numbers can start with 7 or 0 or +94.
So I tried it with regex pattern in HTML text input as shown in the below:
<input type="text" name="mobile" class="form-control" pattern ="(?:7|0|(?:\+94))[0-9]{9,10}$" required />
But this pattern is not working for me. Appreciate your help.
UPDATE:
Here Im using jQuery validate to validate a front end form.
You can use
pattern="(?:7|0\d|\+94\d)\d{8}"
See the regex demo. It will be compiled into a pattern like ^(?:(?:7|0\d|\+94\d)\d{8})$ and will match
^(?: - start of string and the non-capturing group start
(?:7|0\d|\+94\d) - 7, or 0 and a digit or +94 and a digit
\d{8} - eight digits
)$ - end of the group, end of string.
See the demo below:
input:valid {
color: navy
}
input:invalid {
color: red;
}
<form>
<input type="text" name="mobile" class="form-control" pattern="(?:7|0\d|\+94\d)\d{8}" required />
<input type="Submit"/>
</form>
Can try this hope it helps
if it starts with 7, the length must be 9 digits
if it starts with 0, the length must be 10 digits
if it starts with +94, the length must be 12 digits
input:not(:placeholder-shown):invalid{
background-color:pink;
box-shadow:0 0 0 2px red;
}
<input type="text" name="mobile" class="form-control" placeholder="Phone number" pattern ="(7[0-9]{8}|0[0-9]{9}|\+94[0-9]{9})$" required />
If you are looking for a regex pattern that only works for your examples try this:
(?:(?:7|0[1-9]{1})|(?:\+94))[0-9]{8}
7|0[1-9]{1} accepts 7 or 0 and one other digit between 1-9
the | is used to represent the "OR" condition
\+94 accepts +94 as the 3 beginning digits
[0-9]{8} means 8 other digits between 0 and 9
If you are looking for a pattern that could work for a wide range of phone number patterns, you could try this:
^[+]?[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$
How this works:
^ represents the beginning of the string
[+]? for phone numbers that include "+" at the beginning
[(]{0,1} represents the opening " ( ". For phone numbers that include (###). Example: (222)333-333
[0-9]{1,4} represent the number in between the "(###)"
[)]{0,1} represent the closing ")"
[-\s\./0-9]* this will allow phone numbers to be accepted even if the numbers are divided using "-" or " " or "."
$ represents the end of the string
Check this site: https://regexr.com/
Is it possible to limit the number of digits that a user can into a field. E.g.
For a 3 digit number 184 only
For a 8 digit number 18875264 only
HTML5 introduced a new attribute for input tag - pattern. You can specify the regex as value of pattern attribute to validate the input.
pattern does not work with type="number" so I'll use type="text" instead. type="tel" will also work but don't use it unless you really want to input a telephone number.
<form>
<label for="num-input">3 or 8 digit number: </label>
<input id="num-input"
type="text"
required
pattern="\d{3}|\d{8}"
title="must be 3 or 8 digit"/>
<br/>
<input type="submit" value="submit" />
</form>
The regex \d{3}|\d{8} matches 3 digit number or 8 digit number.
The most basic HTML-only way of limiting it to three digits would be:
<input type="number" max="999" min="-999" />
However, this won't force the max or min attributes when the user inputs a value by hand instead of using the add or substract buttons of the input. To validate that, you'd need to add some javascript that checks the users input:
document.querySelector('input[max], input[min]').onblur = function (event) {
const numValue = Number(event.target.value);
// if within the expected range, do nothing
if (numValue < event.target.max && numValue > event.target.min) return;
// check if it's closer to max than to min,
// then set the value to max or min accordingly
event.target.value = event.target.max - numValue < event.target.min - numValue ?
event.target.max :
event.target.min;
}
Update
Upon further inspection, I realized I had misunderstood the question.
In order to allow only three or eight digit numbers, you could use the following validation:
document.querySelector('input').onblur = function (event) {
let valString = Number(event.target.value).toString();
if (valString.length === 3 || valString.length === 8) return;
event.target.value = valString.length > 8 ?
valString.substr(0, 8) :
(valString.length > 3 ? valString.substr(0, 3) : null);
}
<input type="number" />
This will trim any value longer than eight digits to eight, trim any value longer than 3 but shorter than eight digits to three, and leave blank if 1 or 2 digit values are inputted.
I need to apply a mask both to the Input (which has '.' and',' by default), and to the return (which is inside a tag 'p'). I didn't intend to use jQuery, so I would need another solution, I did some research on some libraries, but I didn't succeed.
Input:
<div class="form-group">
<label for="exampleInputEmail1">Valor Estimado</label>
<input [(ngModel)]="ticket.valorestimado" type="number" class="form-control" id="value"
aria-describedby="emailHelp" placeholder="Valor"/>
</div>
Return value:
<div>
<p class="fz-13">R$ {{ j.valorestimado }}</p>
</div
If you want to format the number 30000 as '30,000.00', you can use the number pipe.
<div>
<p class="fz-13">R$ {{ j.valorestimado | number:'1.2-2' }}</p>
</div>
Edit:
This will use the default locale of your app. See the number pipe documentation for more details: https://angular.io/api/common/DecimalPipe.
I chose the format 1.2-2 for at least 1 integer, and between 2 and 2 (i.e. exactly 2) fraction digits.
From the docs:
Decimal representation options, specified by a string in the following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
With HTML and angular, how can I match input to 2 patterns in order to respectively generate 2 different inline error message? the "pattern" in input tag doesn't can't it.
for example, I want to check if the input start with 0.
If it starts with 0, generate a error message"the number cannot start with 0".
Then I want to check if it's 9 digits long. If it is not 9 digits long, generate a error message "the number should be 9 digits long".
The inline error is supposed to be generated as soon as a invalid input is typed in.
I've tried using formcontrol but it broke the whole page.
<form id="validationForm" #validationForm="ngForm" (ngSubmit)="onFormSubmit(validationForm)">
<div class="row">
<div id="u79" class="large-7 columns" data-label="businessNumber">
<label for="u79_input">
<abbr title="example">e.g.</abbr>{{'BUSINESS-NUMBER-PAGE.EXAMPLE' | translate}}
<input id="u79_input" type="text" value="" name="businessNumber" [(ngModel)] = "businessNumber" required minlength="9" maxlength="9" pattern="^\d{9}$" #uname="ngModel" (focus)="setErrors()" class="no-margin"/>
</label>
<!-- inline error -->
<div *ngIf="!hasErrors" id="error" data-label="inline error">
<div *ngIf="uname.errors?.required && validationForm.submitted && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-REQ' | translate}}</small>
</div>
<div *ngIf="uname.errors?.pattern && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-DIGIT' | translate}} </small>
</div>
</div>
</div>
</div>
I think you need just one regex pattern for validation and you can manipulate that with the length of characters in your input field. The regex to match 9 digit number not starting with 0 is
^[1-9]\d{8}$
You can see the validation and the appropriate error messages in the demo I created HERE
This shows 3 types of errors
When the field is empty
The number starts with zero
The number is not 9 digits long
I have a slider that I am using the following code for
<form>
emails: <br>
<div>
<input type="range" id="item1" min="0" max="100" value="0" />
<span class="spanoutput">0</span><br/>
</div>
Total is: $<span id="endprice">0</span>
</form>
Here's the fiddle: https://jsfiddle.net/j2bh9stu/1/
What I am trying to figure out is to how to set up the slider to show a price of $2 everytime the slider passes the 10,000 mark on a 1mil scale. Right now I have it outputting $2 for every single number, while I need it to output $2 if the slider is between 0-10k, $4 if its between 10,001 and 20k, ect.
I've forked your fiddle and modified the js a bit: https://jsfiddle.net/tfqym7cp/2/
main change is here, in the showTotal function:
// it's always a good idea to give readable names to variables
let emailCount = $(this).val();
// fist, compute the number of units you want to charge
let units = Math.floor(emailCount/1e4) + 1;
// then it becomes easy to compute the total price
total += parseInt(units * prices[myid]);
Cheers!