Angular - Template driven form - Email validation not happening - javascript

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

Related

How to remove auto suggestion from an input tag

I need someone to please tell me how to remove this auto-suggested text below the input field. I have tried autocomplete="off" , autocomplete="false". I've also placed <form autocomplete="off"></form> in form tag.
Anyone with a solution please help.
<div class="col-md-6">
<div class="form-group">
<span class="label">Enter Postal Code</span>
<input type="text" class="form-control" id="search_input" autocomplete="off" placeholder="Type postal code ..." required>
</div>
</div>
Here you can see which browsers support the autofill attribute CaniUse. Here is a simple work around from this source: Turning off form-autocompletion.
You can work around with autofill="new-password"
"If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"."
<form method="post" action="/form">
<div>
<label for="cc">Enter Postal Code:</label>
<input type="text" id="cc" name="cc" autocomplete="new-password">
</div>
</form>
Lastly, instead of pairing a <span> with the input element, it is common practice to use the <label> element. Please read more here label
Apply autocomplete="off" to your form not the input box.

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>

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?
I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</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>

HTML FORM CLIENT VALIDATION

I'm quite new to the javascript scene not to mention working with it on a rails application. So i decided to do a client side validation of my signup form everything works ok but my script for checking if password matches confirm password. Everytime it tells me password does not match i was really hoping someone could help me with this. Thanks in advance :) P.S this is mostly html and javascript
<head>
<form id="sign_up" method="post" action="/auth/identity/register">
<div class="field">
<input id="name" class="username" type="text" placeholder="Full name" name="name" required></input>
</div>
<div class="field">
<input id="email" class="username" type="email" placeholder="Email address" name="email" required></input>
</div>
<div class="field">
<input id="password" class="username" type="password" placeholder="Password" name="password" required></input>
</div>
<div class="field">
<input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required></input>
</div>
<div class="field">
<input class="btn btn-primary" type="submit" value="Sign up" name="commit"></input>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("password_confirmation").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password_confirmation").value;
var pass1=document.getElementById("password").value;
if(pass1!=pass2){
document.getElementById("password_confirmation").setCustomValidity("Passwords Don't Match");
}
else
document.getElementById("password_confirmation").setCustomValidity('');
//empty string means no validation error
}
</script>
</div>
</head>
As the commenters have said, your code works when you move it into the <body> of the document. Perhaps there's more than one element with ID password or password_confirmation within the document?
If not I would start by logging the entered password and password_confirmation values, i.e.:
console.log("Password box value: "+pass1);
console.log("Password confirmation box value: "+pass2);
Put these lines below the line var pass1=document.getElementById("password").value;
Then you can visually inspect the entered values in your browser console (F12 key) to make sure they're the same. Check the values just after you click the submit button. Bear in mind you're binding the onchange event to the inputs so you'll see logging when you move from the password input to the password confirmation input (you can ignore this as you won't yet have entered the confirmation password).
Finally, it's worth bearing in mind that Firefox behaves slightly differently to Chrome in terms of user feedback; Firefox puts a red glow around the offending text input as you type, which disappears when the password entered in the password confirmation input is the same. Chrome does not do this and only gives indication that the passwords didn't match after you click the submit button.

Categories

Resources