When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
Related
Some time post request takes query string i.e localhost/?password=123456 Don't know why do we need to add button type="button" or type="submit" please suggest thanks
<form name="login" novalidate>
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" type="button" class="btn btn-danger">Login</button>
</div>
</form>
<form name="login" novalidate method="post">
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" class="btn btn-danger">Login</button>
</div>
</form>
use method as post if you setup button type button then it will work on button click only
I have a form on my register page that allows a user to create their account. If the create account request is successful my angular redirects the user to the login view. When the user lands here it auto fills the username/email field with the last name from the previous form.
I am not quite sure why though. The forms both have the same id's and name values so I am very confused on the chrome auto-filling.
Found something out, after registering an account the user is redirected to the login page. It auto fills the lastname into the username box then populates the password correctly. However if you clear the lastname out and login using the proper credentials it updates that Google Save Locker record and from that point on works correctly.
Here are visual examples of what I am seeing.
Registration:
Filling out form so you can see the last name value
Getting redirected to login page after registration:
The UI chrome displays after landing on login page
Link to page for live example:
Website link : app.baileysproject.com
Register form:
<form class="form-horizontal" id="RegisterForm">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="stuff.Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="FirstName">First Name</label>
<div class="col-md-4">
<input id="FirstName" name="FirstName" type="text" placeholder="First Name" class="form-control input-md" ng-model="stuff.FirstName" required="">
<span class="help-block">Your first name</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="LastName">Last Name</label>
<div class="col-md-4">
<input id="LastName" name="LastName" type="text" placeholder="Last Name" class="form-control input-md" ng-model="stuff.LastName" required="">
<span class="help-block">Your last name</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-match="stuff.Password" ng-model="stuff.Password" required="">
<span class="help-block">Enter a strong password</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cPassword">Confirm Password</label>
<div class="col-md-4">
<input id="cPassword" name="cPassword" type="password" placeholder="Password" class="form-control input-md" ng-model="stuff.ConfirmPassword" required="">
<span class="help-block">Enter the same password again</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="CreateAccount" name="CreateAccount" ng-click="CreateAccount()" class="btn btn-info">{{AccountCreatedValue}}</button>
</div>
</div>
</fieldset>
</form>
Login form:
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-model="Password" required="">
<span class="help-block">Strong Password</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="Login" name="Login" ng-click="Login()" class="btn btn-info">Login</button>
</div>
</div>
</fieldset>
</form>
Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp
Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>
I am displaying a form in a modal. But when I click on the text input field it is not allowing me to enter text. similarly unable to change/select radio buttons
But when trying with "tab" it is working.
code
<form role="form" name="basicDetails" class="form-validation">
<div class="col-sm-6 b-r">
<h3 class="m-t-none m-b font-thin">Basic Details</h3>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="Enter Email" ng-model="email" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="Enter User Name" ng-model="username" ng-pattern="/^[a-zA-Z ]{1,17}$/" required>
</div>
</div>
<div class="checkbox m-t-lg">
<button type="submit" class="btn btn-sm btn-success pull-right text-uc m-t-n-xs" ng-click="ok()"><strong>UPDATE</strong></button>
<button type="submit" class="btn btn-sm btn-danger pull-right text-uc m-t-n-xs" ng-click="close()"><strong>CLOSE</strong></button>
</div>
</form>
inspect element shows
Can someone help me to trace the issue.