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

Javascript soap form validation

I want form value to be replace with xml value while submit and match the user and pass for login ..
XML Data hosted
in place of GlobalID i have user and languageid i have pass
Form Body :-
<input type="text" value="username" placeholder="enter user name"><br>
<input type="password" value="password" placeholder="enter password"><br>
<input type="text" value="macid" placeholder="Mac ID"><br>
<input type="text" value="version" placeholder="Version"><br>
<button class="actionSubmit" onclick="loginValidation()" type="submit">Login </button>
Help me to fix this. i need to do with js or jquery

generic solution for ngdisabled with required field only

So, I am starting with a requirement of disabling submit button if the required field is not being filled.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/>
<input type="text" placeholder="First Name" data-ng-model="model.lastName" name="lastname" ng-required="true" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</form>
So far so good. However, if there are additional validation field as follow, the above will not work as the requirement is to only disable submit button if the required field is not being filled only regardless of other validation.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" ng-minLength="5" /><br/>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" name="lastname" ng-required="true" ng-minLength="3" ng-maxLength="10" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</button>
</form>
I could have wrote a bloated solution independently $watch the changes of each of the input value for each and every form in controller, but it is tedious and not reusable. What am i expecting is something more generic as follow:
<button type="button" ng-disabled="!form.$required">Submit</button>
Perhaps I missed out something/some existing function that is already available. But I think that to disable submit button until all required field is being filled is something very common for UX/UI.

AFAIK there is no easy solution like you have mentioned, You can write a directive including form directive and set a flag in form(by watching the ng-required form fields)
Or, in controller with form have a scope function like
function disableSubmit() {
return form.FirstName.$error.required || form.LastName.$error.required;
}
<button type="button" value="SAVE" ng-disabled="disableSubmit()">Submit</button>
Adding the #kubuntu's jsFiddle here.
http://jsfiddle.net/3eqz2/421/

On registration form , form fields are not getting saved in browser auto fill on submit .(ReactJs)

I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .

I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.

How to remove HTML5 title attribute after validation

I am using html 5 for mobile development in Icenium.
I want to do validation so I used required attribute along with title attribute to show messages to user.
But once I do enter correct input into the specified fields that title messages should get remove; as it won't be appropriate to show messages to user once they enter appropriate values.
I want to remove titles form fields after validation, is there any way for this?
<li>
<label>First Name:
<input type="text" data-bind="value: firstName" required title="Please Enter your First Name">
</label>
</li>
<li>
<label>Last Name:
<input type="text" data-bind="value: lastName" required title="Please Enter your Last Name">
</label>
</li>
<li>
<label>Email:
<input type="email" required title="please enter your email" data-bind="value: emailAddress" autocomplete="off">
</label>
</li>

Try this:
<li>
<label>First Name:
<input class="txtCheck" type="text" data-bind="value: firstName" required title="Please Enter your First Name">
</label>
</li>
$('.txtCheck').on('blur keyup', function(){
if($(this).val() == "yourvalue"){
$(this).removeAttr('title');
}
});

If you want to rely on HTML5 functionality, then I’d suggest making use of the constraint validation API.
element.willValidate, element.validity.valid or element.checkValidity() are what you could query upon the blur event (or change, keyup, whatever) to see if a certain element is currently in valid state or not.