When I am clicking login button, error messages are not showing.
<form name="loginform" ng-submit="loginform.$valid && login()" novalidate >
<div class="form-group" ng-class="{ 'has-error' : loginform.username.$invalid && !loginform.username.$pristine }">
<input type="email" name="username" class="form-control" ng-model="user.username" placeholder="Email" required>
<p ng-show="loginform.username.$touched && loginform.username.$invalid" class="help-block">The name is required.</p>
<p ng-show="loginform.username.$touched && loginform.username.$error.email" class="help-block">Please enter valid email id.</p>
</div>
<input type="password" ng-model="user.password" placeholder="Password" class="form-control"> <br>
<button type="submit" value="Log in" class="btn btn-primary" >Log In</button>
</form>
Related
I am trying to toggle css class on input if validation is valid, i can do if is invalid, but i need two classes if is valid and if is not. Is it easy to make it if is not valid, but how to add if is valid, here is my code i have for now:
<form name="userForm" ng-submit="submitForm()" novalidate>
<input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }" />
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
<input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required />
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p>
<button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button>
</form>
You will notice that i have class has-error but i need also class no-error
Try this...
.has-error {
background: red;
}
.no-error {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
<form name="userForm" ng-submit="submitForm()" novalidate>
<input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine,'no-error' :!userForm.email.$invalid }" />
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
<input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required />
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p>
<button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button>
</form>
</div>
If you need another class, just add it with the opposite condition:
<input type="email" name="email" placeholder="E-mailadres"
class="input-field" ng-model="user.email" required
ng-class="{
'has-error' : userForm.email.$invalid && !userForm.email.$pristine,
'no-error' : !userForm.email.$invalid || userForm.email.$pristine
}"
/>
ng-class="{userForm.email.$invalid && !userForm.email.$pristine?'has-error':'no-error'}"
Here is my registration form and I want all the form fields to be stored in a json string variable using angular and then post that json string to a certain url. When the user is registered it must show "successfully registered" message but if email_id or username already exist server should send back form data in with error. Below is registration form.
<form name="myForm" class="register--form" ng-submit="register()" novalidate>
<fieldset>
<input class="register--first-input" type="text" name="firstname" placeholder="First Name" ng-model="user.firstname" ng-required="true">
<p class="error validationerror" ng-show="myForm.firstname.$invalid && myForm.firstname.$touched">You must enter your first name.</p>
<input class="register--last-input" type="text" name="lastname" placeholder="Last Name" ng-model="user.lastname" ng-required="true">
<p class="error validationerror" ng-show="myForm.lastname.$invalid && myForm.lastname.$touched">You must enter your last name.</p>
<input class="register--email-input" type="email" name="email" placeholder="Email" ng-model="user.email" ng-required="true">
<p class="error validationerror" ng-show="myForm.email.$invalid && myForm.email.$touched">Must be a valid email.</p>
<input class="register--password-input" type="password" name="password" placeholder="Password" ng-model="user.password" ng-required="true">
<p class="error validationerror" ng-show="myForm.password.$invalid && myForm.password.$touched">You must enter a password.</p>
</fieldset>
<button type="submit" class="register--submit" ng-disabled="myForm.$invalid">Register</button>
<span>or</span>
<a class="login--register" ng-href="#/login">Login</a>
</form>
Below is login form
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Login</button>
Register
</div>
</form>
In the controller where you have the button clicked method create a variable like and it will have the values in the key named same as the ng modle
$scope.show={};
I have written simple code for angular validation.
The create button should remain disabled util the user enters all the details.
But now the button does not get disabled.The code for form is,
<form name="networkIDForm" novalidate>
<div class="ActsummaryHdrs pb10">Create Network ID</div>
<div class="form-group clearfix " ng-class="{ 'has-error': networkIDForm.networkID.$touched && networkIDForm.networkID.$invalid }">
<input type="text" placeholder="Network ID" name="networkID" class="form-control column48 pull-left " required/>
</div>
<div class="clearfix clearfix mt20">
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.firstname.$touched && networkIDForm.firstname.$invalid}">
<input type="text" placeholder="First Name" name="firstname" class="form-control" required/>
</div>
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.lastname.$touched && networkIDForm.lastname.$invalid }">
<input type="text" placeholder="Last Name" name="lastname" class="form-control" required/>
</div>
</div>
<div class="clearfix mt20 mb10 form-group" ng-class="{'has-error': networkIDForm.email.$touched && networkIDForm.email.$invalid }">
<input type="text" id="to" name="email" placeholder="Email Address" class="form-control " required/>
</div>
<div class="clearfix mt20">
<div class="column48 pull-left form-group" ng-class="{ 'has-error': networkIDForm.password.$touched && networkIDForm.password.$invalid }">
<input class="form-control" type="Password" placeholder="Password" name="password" required/>
</div>
<div class="column48 pull-right form-group" ng-class="{ 'has-error':networkIDForm.cpassword.$touched && networkIDForm.cpassword.$invalid }">
<input type="Password" placeholder="Confirm Password" name="cpassword" class="form-control" required/>
</div>
</div>
<div class="clearfix mt20 mb10">
<a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-disabled="networkIDForm.$invalid">Create</a>
<a id="CreateUserBackBtn" onclick="showCreateNetworkID()" class="btn general_btns_grey pull-right mr5" href="">Back</a>
</div>
</form>
You can't disable anchor tag using ng-disabled.
Try to use button tag instead
<button id="CreateUserCreateBtn" type="button" class="btn general_btns_green pull-right ml5" ng-disabled="networkIDForm.$invalid">Create</button>
or you can do it using ng-class
Like this
.not-active {
pointer-events: none;
cursor: default;
}
<a id="CreateUserCreateBtn" class="btn general_btns_green pull-right ml5" ng-class="{'not-active' : networkIDForm.$invalid }">Create</a>
You are also missing ng-model in your form.
JSFIDDLE
I've created a form with angularjs, but when I first load the page, the form starts out invalid and the entire form turns red. I've added "novalidate" to the form and "required" to an input, yet the whole form starts our invalid and red.
From this program when you are clicking submit button without entering any values validation will happen
<form name="product_form" class="form-horizontal" role="form" novalidate>
<div class="control-group" ng-class="{true: 'error'}[submitted && product_form.emailid.$invalid]">
<form-element label="Name" mod="product">
<input type="text" class="form-control" name="name" placeholder="name" ng-model="product.name" ng-disabled="product.id" required/>
<span class="help-block" ng-show="submitted && product_form.name.$error.required"> Please enter name </span>
</form-element>
<form-element label="Emailid" mod="product">
<input type="email" name="emailid" class="form-control" placeholder="emailid" ng-model="product.emailid" required>
<span ng-show="submitted && product_form.emailid.$error.required" class="help-block">Please enter emailid</span>
</form-element>
<form-element label="Password" mod="product">
<input type="password" name="password" class="form-control" placeholder="password" ng-model="product.password" required/>
<span ng-show="submitted && product_form.password.$error.required" class="help-block"> Please enter password </span>
</form-element>
</div>
<div class="space"></div>
<div class="space-4"></div>
<div class="modal-footer">
<a class="btn btn-sm" ng-click="cancel()" ><i class="ace-icon fa fa-reply"></i> Cancel </a>
<button ng-click="saveProduct(product);submitted=true"
ng-enabled="product_form.$invalid || enableUpdate"
class="btn btn-sm btn-primary ng-binding"
type="submit">
<i class="ace-icon fa fa-check"></i>Submit
</button>
</div>
</form>
I'm missing something simple I am sure of it, but my form validation messages never appear in the following code.
<form name="loginform" ng-controller="controllers.LoginController" ng-submit="loginUser(loginform.$valid)" novalidate>
<fieldset>
<br/>
<legend><h3>Account Login</h3></legend>
<div class="{ 'has-error' : loginform.username.$invalid && !loginform.username.$pristine }">
<label>Username:</label>
<input type="text" ng-model="username" name="username" placeholder="username" class="form-control" required><span ng-show="loginform.username.$invalid && !loginform.username.$pristine" class="help-block">Required!</span>
</div>
<br/>
<div class="{ 'has-error' : loginform.password.$invalid && !loginform.password.$pristine }">
<label>Password:</label>
<input type="password" name="password" ng-model="password" placeholder="password" class="form-control" required><span ng-show="loginform.password.$invalid && !loginform.password.$pristine" class="help-block">Required!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" >Submit</button>
Login
</div>
</fieldset>
</form>
controllers.LoginController = function ($scope, $location, AuthFactory, Page) {
'use strict';
$scope.username = null;
$scope.password = null;
$scope.loginUser = function (isValid) {
The $pristine check was the problem... Here are the corrections...
<form name="loginform" ng-submit="loginUser(loginform.$valid)" novalidate>
<fieldset>
<br/>
<legend><h3>Account Login</h3></legend>
<div class="form-group" ng-class="{ 'has-error' : loginform.password.$invalid && submitted }">
<label>Username:</label>
<input type="text" ng-model="username" name="username" placeholder="username" class="form-control" ng-required="true" required><span ng-show="loginform.username.$invalid && submitted" class="help-block">Required!</span>
</div>
<br/>
<div class="form-group" ng-class="{ 'has-error' : loginform.password.$invalid && submitted }">
<label>Password:</label>
<input type="password" name="password" ng-model="password" placeholder="password" class="form-control" required><span ng-show="loginform.password.$invalid && submitted" class="help-block">Required!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" >Submit</button>
Login
</div>
</fieldset>
</form>
If your application is form heavy, consider using this thirdparty ngValidate module.
<input name="demo-field-1" ng-model="user.name" ng-validate="custom-strategy">
The directive will add a span to hold your error messages. You can define custom validation strategies and individual error messages.
demo plnkr