HTML5 input text/password field pattern join by a number - regex

In HTML5:
How could I validate my input text , by a regular expression that the chain has at least 1 number ?
I'm looking for is that you can write anything but at least have a chain number written
<input type="password" name="pass" placeholder="Password" pattern="[0-9]+" required>
Thanks

I think below code will help you to solve your problem
<input type="text" name="country_code" pattern="^\d{1,}$"/>

pattern=".*\d.*"
which means
Any number of characters, then a digit, then any number of characters.

with javascript/jquery, e.g.
<input id="test"/>
$('#test').on('change',testme);
function testme(e) {
if ( e.target.value.match(/[0-9]+/) ) {
alert('yay!');
}
}
for the pattern property:
<input class="span2" type="password" name="pass" placeholder="Password" pattern=".*[0-9]+.*" required>

Related

Smatry replace not print array of variable

{$variable.fieldname} = Username
My input <input type="text">
I have Tried {$variable|replace:"type=\"text\"":'type="text" placeholder="{$variable.fieldname}"'}
Getting Output: <input type="text" placeholder="{$variable.fieldname}">
Expected: <input type="text" placeholder="Username">
You need to assign an additional variable and use regex_replace method instead.
{assign var="newvar" value="type=\"text\" placeholder=\"{$variable.fieldname}\""}
{$variable|regex_replace:"/type=\"text\"/":{$newvar}}

Email Validation with HTML5 Required Attribute plus Regular Expression Pattern

I'm using the native HTML5 validation for an "email" field and it works fine! However, I would like to increase it to a specific case, where I do not want to accept emails with "free" domains (gmail, hotmail, etc).
I did the regular expression and tested it and it worked correctly (Here you can do the test: https://regex101.com/r/wBt3YN/1). But when applying to the pattern of the email field, nothing happens.
How to proceed?
Some strings:
maykel#gmail.com -> Can't allow
maykel#marfin.com -> Can allow
maykel#outlook.com -> Can't allow
Regex Pattern
^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$
My form
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>
Here is my code where I do not allow yahoo & hotmail. However, e-mail validation is a very delicate thing.
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^[^#]+#(?!(yahoo|hotmail))[^#]+\.[a-z]{2,}$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>

html pattern attribute

I'm trying to limit my text input to only allow letters, not numbers. With a maximum of 100 characters. I'm having trouble finding out how to use the pattern attribute to only allow letters. Here is a portion of my code attempting this.
<form action="http://www.severien.com/grit/formecho.php" method="post" target="_blank">
<label for="videorequests"> Video Requests:</label>
<input type="text" id="videorequests" name="videorequests" maxlength="100" pattern="[a-z]{1,100}" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
Using the attribute maxlength I'm limiting the character input to 100. How do I use pattern to limit the character use to only letters, excluding numerical characters?
use this
pattern="[A-Z a-z]{1,100}"

Angular2 pattern validator on Input

I'm trying to setup a pattern validator with the following regex :
^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$
Try Regex here
That should allow me to get 1 to 3 digits, and then a decimal part of maximum 2 digits, and that should allow empty values as well.
The problem is that either my input is of type text and the validator is rejecting my input (any input since it's not considered as a digit I believe); or the input is of type number and without step="any" my input value is rejected if I have a decimal input (while the regex seems to be working on simpler values), and with step="any" it seems my regex is not working at all, allowing whatever value because of the step.
<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >
<div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
<label for="bottlePrice">{{bottle.name}} : </label>
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
[pattern]="pricePattern"
[(ngModel)]="bottleArrayToUpdate[i].price">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<!--(click)="bottleUpdatePriceForm.reset();"-->
</form>
EDIT : adding my component code for regex binding
private pricePattern = /^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$/;
Be it text or number I don't really care, I just need the pattern to work on my input... Any insight or something I am missing ?
Here is a working example in a plunkr : https://plnkr.co/edit/znVaS7?p=info
You can switch the input line in the plunkr to see the different cases :
<input type="text" class="form-control" name="bottlePrice" autocomplete="off"
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
Unrelated to the main issue : Is there any way to call the form reset from the component rather than directly in the template ?
==> bottleUpdatePriceForm.reset();
I was wondering, this is just for bonus.
Thanks a lot
This is not a direct solution for the not working regex, but this works with the same purpose. So remove the pattern and just change your input with max and min instead:
<input type="number" class="form-control" name="bottlePrice"
autocomplete="off" step="any" max="999" min="0"
[(ngModel)]="bottleArrayToUpdate[i].price">

How to correctly validate number ranges in HTML Input? (Angular 2)

In my Angular 2 application I have a component with a input field which is supposed to accept a range of numbers.
More specifically, 2 cases:
range 0[0]-23 (hours)
range O[0]-59 (minutes)
I am using
<form>
<input type="text" pattern="[0-9]"> <!-- 0-9 -->
<input type="text" pattern="\d|1\d|2[0-3]"> <!-- 0-23 -->
<input type="text" pattern="\d\d"> <!-- [0-99] -->
</form>
The issue is that I can basically input anything (as if validation was ignored), including text.
I don't think it's an issue related to Angular 2 since standard validation works, e.g.
<input type="number">
allows to input only numbers (but any number which is not what I want)
I also tried with min=0 and max=23 (or 59) attributes with type number but that doesn't work either.
<form>
<input type="number" min="0" max="9"> <!-- 0-9 -->
<input type="number" min="0" max="23"> <!-- 0-23 -->
<input type="number" min="0" max="99"> <!-- [0-99] -->
</form>
For future reference,
I solved by using Angular 2's FormBuilder as in:
ts
...
constructor(...
private formBuilder: FormBuilder);
timeForm: ControlGroup;
ngOnInit(){
let regexPatterns = {
// this can be improved
hours: "[0-2]?[0-9]?",
minutes: "[0-5]?[0-9]?"
};
this.timeForm = this.formBuilder.group({
hour: ['', Validators.pattern(regexPatterns.hours)],
minute: ['', Validators.pattern(regexPatterns.minutes)]
});
html
<form [ngFormModel]="timeForm">
<!-- additional validation (HTML 5) for 'required' -->
<input type="text" required ngControl="hour">
<input type="text" required ngControl="minute">
</form>