Develop Reference

Angular - Template driven form - Email validation not happening

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

How to inject customized validation on bootstrap form field

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>

Email id and name field verification use js

I have an doubt in my Register form incase i enterthis is correct format but fake id it is Acceptable my form .Any idea to Avoid to this problem....And Also I use the following code for name field text box it Allow many space i Want Only One Space in that text-box ... Any Idea?
<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'');"required>

<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'').replace(/\s\s+/g, ' ');"required>

Validation of 3-d type password using angular.js

I have one password field that should have an alphabetical, numerical, one upper case and one special character with no spaces and minimum 8 characters length. How can I validate this using angular.js?
My code is below:
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<input type="{{inputType}}" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" >
In some of my code I am using ng-message to check the validation like email and username.

Use ng-pattern and find proper regEx
<input type="{{inputType}}" name="itemname" id="contactno" class="form-control" placeholder="password" ng-model="password" ng-pattern="/[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/.">
This is expamle regEx, u should find one that accept your criteria

Parsley.js - Validate optional input for only numbers

I have a form that has one optional input and 3 required input fields. For the optional input I have the below markup:
<input type="number" placeholder="0" min="0" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup">
This does not fire the validation if I have type in letters or any other characters. It does validate for min and max values. If I put required attribute it does seem to work but I don't want that. I also tried defining a pattern as below:
data-parsley-pattern="^[0-9]*$"
None of them seem to work. Any ideas?

You can use data-parsley-type="digits". Notice the use of type="text" instead of number.
This works if you only want to allow digits (not floats).
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="digits" />
If you want floats, you can use data-parsley-type='number':
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="number" />