I am trying to validate email address in my html page using angular directive.
To me valid email address is
hello#mycompany.com
The following regular expression allows following email address
hello#mycompany
What kind of regular expression I could use that would also enforce the ".com" part of email address meaning enforce "." and any thing after "."
I have researched internet and used different listed regular expression but none are working
<div class="form-group" ng-class="{ 'has-error': registerUpdateForm.Email.$invalid }">
<label class="col-sm-3 control-label" for="Email">Email Address</label>
<div class="col-sm-9">
<input required type="email" data-ng-model="auth.Email"
data-ng-pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"
id="email" name="Email" class="form-control" /> <!--ng-pattern="matchPattern"/>-->
</div>
</div>
The expected value is a Regexp or an inline pattern, which in javascript looks like /pattern/. The regular expression itself looks good, so just try adding the forward slashes at the beginning and end:
<input required type="email" data-ng-model="auth.Email"
data-ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/"
id="email" name="Email" class="form-control" />
Plunker Demonstration
The W3C specification for <input type="email"> says that the email address must match the regex
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
so that would be a reasonable start on something like (untested)
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+\.com$/
Note that you can't restrict the top-level domain to {2,4} characters any more, if you want to allow more than just ".com": Proposed domains.
Related
I am making a simple template-driven form with 'Email Validation' in it (Not by Reactive Forms). So, required, minlength, maxlength are working fine. But, when I try email to be valid, its failing. Can someone help me out?
abc.component.html
<form #customForm="ngForm" (ngSubmit)="alpha(customForm)">
<input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"><br/>
<div *ngIf="firstName.touched">
<p *ngIf="firstName.errors?.required">First Name is Required!!!</p>
<p *ngIf="firstName.errors?.minlength">First Name minimum 3 characters are required!!!</p>
<p *ngIf="firstName.errors?.maxlength">First Name max length is 10!!!</p>
</div>
<input type="email" name="email" ngModel #email="ngModel" required><br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.email">This is not a valid Email!!!</p>
</div>
<button type="submit" [disabled]="customForm.invalid">Submit</button>
</form>
Note: Though required validation of email is taking place, but as the
pattern or data entered is not correct, the 2nd validation in email
validation div must give error.
Result: (Email valid and its pattern not automatically giving error)
You could add an email attribute to your Email Input. But then that would not in-validate it for something of the pattern xxx#xxx which I think would not be a valid email in your case.
I suggest you use pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" instead. Then, where you're showing the error message, you should check for email.errors?.pattern instead.
Give this a try:
<input
type="email"
name="email"
ngModel
#email="ngModel"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"
required>
<br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>
Try both the approaches on this Sample StackBlitz and use the one that suits you better.
Replace this line
<input type="email" name="email" ngModel #email="ngModel" required>
with
<input type="email" name="email" ngModel #email="ngModel" required email>// add email attribute
use "pattern = regrex" in input tag and use validation email?.errors?.pattern
I use bootstrap in my html form as below. It has a user name input field with a simple validation rule which is length must between 1 and 16 characters. I wonder how I can put more validation rules on this field. For example, I want to check the username must not start with a number and doesn't include special characters like * # # etc. I am fine if it requires some jquery code. But I don't know how to inject the validation logic and make it works wit the with-errors div.
<div class="form-group">
<label for="user-username-input">User Name</label>
<input type="text" class="form-control" id="user-username-input" placeholder="User Name" maxlength="16" data-minlength="1" data-error="Required" required>
<div class="help-block with-errors"></div>
</div>
Use html5 input pattern attribute.
<form>
<div class="form-group">
<label for="user-username-input">User Name</label>
<input type="text" class="form-control"
id="user-username-input" placeholder="User Name"
pattern="[a-zA-Z]+[a-zA-Z0-9]{1,16}"
title="Username should be alphanumeric of length upto 16 characters and first character can not be number."
required>
<div class="help-block with-errors"></div>
<input type="submit" value="submit">
</div>
</form>
I'm having a problem with understanding the building validation forms. In bootstrap current documentation there is a piece of JS code (so called starter code):
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
</script>
and it works fine but what should I do if i want to implement password check, for example? If i inderstand it right Bootstrap has css classes :valid and :invalid which run when the field is empty. I want to fire them when some condition is the (ie password less than 8 symbols).
<form id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword1">Password</label>
<input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required>
<div class="invalid-feedback">
Please provide a valid password.
</div>
</div>
</form>
You could use the pattern attribute. From MDN:
pattern
A regular expression that the control's value is checked
against. The pattern must match the entire value, not just some
subset. Use the title attribute to describe the pattern to help the
user. This attribute applies when the value of the type attribute is
text, search, tel, url, email, or password, otherwise it is ignored.
The regular expression language is the same as JavaScript RegExp
algorithm, with the 'u' parameter that makes it treat the pattern as a
sequence of unicode code points. The pattern is not surrounded by
forward slashes.
For example, the following will validate that the password is at least 8 characters with upper case, lower case and numbers:
<form id="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword1">Password</label>
<input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
required>
<div class="invalid-feedback">
Passwords should be a minimum of 8 characters and include at least one upper case letter, one lower case letter and one number.
</div>
</div>
</form>
I am trying to validate the email address using a regular expression such that it throws an error if white spaces are added anywhere in the email. The current regex I am using is this:
<input type="email" class="form-control" name="username" ng- model="username" id="email" placeholder="Email" ng-pattern='/^(([^<>()\ [\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
<span ng-show="login.username.$error.pattern">This email format is invalid! </span>
The problem is it allows me to add white spaces in the end. How can I modify it so that if I add a whitespace in the end the error message is fired?
The newest release of angularJs (1.5.7) includes some email address validation improvements.
You can check the commit here.
Line 28 corresponds to the committed regex:
var EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}#)[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+)*#[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
Below the directive's code you have the tests to validate the regex. It does check for white spaces.
First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs.
I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and so on) with least amount of code. Looking at Bootstrap's docs, I didn't find any such documentation.
I am wondering it I can use something that resembles formvalidation.io for validation without writing a ton of javascript combined with above tooltip style.
I can do javascript, but if there's a better way, I would like to know.
Right now, my form is extremely simple, no tooltip Javascript and this works:
<form ng-submit="submit()">
<!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
you can change/edit the message of the tooltip using pattern
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Good Link on patterns right here: it has time and a lot of data types patterns
If you use type="email" the tooltips you see are generated by the browser.