I am using ex6 and angularjs and I write an angularjs validation form.
the HTML doesn't show up. it's not showing any errors.
The HTML of the validation :
<form id="form" name="login.sign" class="setup info" novalidate>
<div class="input-group login-max-width">
<span class="input-group-addon" id="login-addon">
<i class="fa fa-envelope" id="login-addon"></i>
</span>
<input id="login.credentials.email" type="email" class="form-control email validate valid"
name="login.credentials.email" ng-model="login.credentials.email" placeholder="Email" required>
</div><br />
<div class="input-group">
<span class="input-group-addon lock-fix">
<i class="fa fa-lock"></i>
</span>
<input id="login.credentials.password" type="password" class="form-control password validate valid"
name="login.credentials.password" ng-model="login.credentials.password" placeholder="Password" ng-minlength="6" required>
</div>
<center>
<div class="input-group text-center" ng-show="login.error">
<h3 class="error-show">{{login.error}}<i class="fa fa-exclamation-triangle"></i></h3>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 login-flex-display">
<button type="submit" class="btn btn-success right-margin-button" ng-click="login.signIn(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Login
</button>
<button type="submit" class="btn btn-success" ng-click="login.signUp(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Register
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.email.$invalid">Email is not valid</h5>
</div>
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid">Password must be atleast 6 digits</h5>
</div>
</div>
</form>
The routes.login.js :
import template from './login.html';
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('login', {
url: '/Login',
template: template,
controller: 'LoginController',
controllerAs: 'login'
});
}
The login controller :
import {createUser} from '../../api/usersApi';
export default class LoginController {
constructor($location, authentication) {
this.location = $location;
this.authentication = authentication;
this.error = '';
}
}
LoginController.$inject = ['$location', 'authentication'];
Thx for the help guys. hope you have any idea how to solve it out.
i think its related to the "sign" and to controller as name "login"
But i still didn't figure it out.
try to change ng-show="login.error" to ng-show="login.sign.error" angular bind the the error to the name of the form
I hope this helped you.
Related
When i load login.jsp it doesn't alert if i dont input password or username
tried checking wether i correctly attached the file but it still doesnt work for me, what could be the reason?jsp just reacts the way it would react if i wouldn't use js at all
LoginPage.js
function check()
{
var username = document.form.username.value;
var password = document.form.password.value;
if (username==null || username=="")
{
alert("Username can't be blank");
return false;
}
else if(password==null||password=="")
{
alert("Password must be inserted ");
return false;
}
}
my jsp:
<body>
<div class="card-body">
<form method="get" action="LoginServlet" onsubmit="return check()">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input id="username" type="text" class="form-control" placeholder="username" name="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input id="password" type="password" class="form-control" placeholder="password" name="password">
</div>
<div class="form-group">
<input id="login-button" type="submit" value="Login" class="btn float-right login_btn" >
</div>
</form>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center links">
Don't have an account?Sign Up
</div>
</div>
</div>
</div>
</div>
<script src="LoginPage.js"></script>
</body>
</html>
any suggestions ?
firstly check the HTML syntax of your jsp, it seems that the html is broken because of the last three </div> because of the missing opening tags.
Then, you don't have by default a document.form property so you could get your username and password in the following way:
// or you can use document.getElementById('username')
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
here details about the querySelector function
Is it possible to submit a form that have a submit button (by pressing enter)
I have two text fields by clicking the login button I am able to process the outcome but I am unable to do it by hitting enter.
Here is the HTML code(updated with full code)
this is signin.component.html
<div class="modal-content" style="padding: 10px;" id="login" *ngIf="show">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password? Reset
</p>
<p class="forgotPwd">
New User? Register now
</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="showSignUp">
<app-sign-up></app-sign-up>
</div>
<div *ngIf="showForgotPassword">
<app-forgot-password></app-forgot-password>
</div>
this signin.component.ts file
import { Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import { Router } from '#angular/router';
import { AuthService } from '../services/auth/auth.service';
#Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
username:string;
password:string;
show = true;
showSignUp = false;
showForgotPassword = false;
errMsg = "";
constructor(
private authService: AuthService,
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
this.authService.getEmitter().subscribe(res => {
if(res){
this.activeModal.dismiss('success');
}
else{
this.username = "";
this.password = "";
this.errMsg = "Invalid Username/Password";
}
})
}
signInGoogle(){
this.authService.loginWithGoogle();
}
signInFacebook(){
this.authService.loginWithFacebook();
}
signInLinkedin(){
this.authService.loginWithLinkedin();
}
logOut(){
this.authService.logOut();
}
login(){
this.authService.login(this.username,this.password);
}
reset(){
this.show = false;
this.showSignUp = false;
this.showForgotPassword = true;
}
signup(){
this.show = false;
this.showSignUp = true;
this.showForgotPassword = false;
}
}
Use (keyup.enter)="focusableSubmit.click()" to input Password and call #focusableSubmit to Button login, this would perform the task and same for button as shown in code below.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
</div>
</form>
<div class = "error"> {{ errMsg }} </div>
<button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<hr>
</div>
</div>
Your button should be inside the form but you have closed it inside the two input fields.
Update your code like this
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
</div>
<div class = "error"> {{ errMsg }} </div>
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
</form>
<hr>
</div>
</div>
Yes you can.
Usually, you need to put your code in action="". But this isn't old HTML, this is Angular, and it works with Javascript.
So, in order to do that, you need to add the novalidate tag, and tell the form what to do when you validate it.
You also need to declare a submit input instead of your button.
This would look like
<form class="loginForm" novalidate (ngSubmit)="login()" autocomplete="off">
<input type="submit" value="Login" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()"/>
Yes it is possible and quite easy!
First you have to replace
(button)="button()"
with
(ngSubmit)="login()"
and remove the click handler from the button and change the type to submit.
Both lines changed look like this:
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">
and:
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button
Dont forget that this way, that button() does not get called.
Angular documentation is really helpful on most of the generel topics, maybe you should take a look there.
Additionally you should consider reading up on some basic information about forms. I personally suggest: forms on MDN and buttons on MDN.
Here's a strapped version of my form for sending comments.
As you see, I prevented the ENTER event on textarea and that will cause pressing ENTER while focused on textarea to not make a new line (but you can use SHIFT + ENTER).
Pressing enter sends a form.
<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
<textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>
Give a try to
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
I had this problem for AngularJS UI. I created a service to fetch a get method api /member/item/ + id, where my parameter id is the specified userID in my database table. I already setup a controller but I keep getting an error. Somehow I manage to get the ID of the user when I declare the value as 1. But I tried to make it dynamic it gives me error.
Controller
app.controller('mainCtrl', function($scope, $window, $rootScope, adminService){
$scope.usertype = localStorage.usertype;
$rootScope.usertype = localStorage.usertype;
$rootScope.userID = localStorage.userID;
$scope.username = localStorage.username;
// $scope.userID = 1;
$scope.id= $scope.userID;
// $scope.userID = localStorage.userID;
adminService.editMember($scope.id)
.then(function(data){
//array
$scope.id = data.data[0].userID;
$scope.f_name = data.data[0].first_name;
$scope.email = data.data[0].email;
});
});
Service
function editMember(id) {
return $http({
method: 'get',
url: rootURL + '/member/item/' + id,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
MemberInfo.html
<div class="card-body">
<h6 class="card-title mb-1 large">
<a href="#" class="col-xs-10" >
<h4>FirstName: {{f_name}}, </h4>
<label >ID: {{uid}}</label>
</a>
<label class="btn btn-primary pull-right" name="editInfo"><input type="checkbox" class="hidden" for="editInfo" name="editInfo" ng-model="editInfo"> <ic class="fa fa-pencil"></i></label>
<form name="myForm" ng-submit="saveProfile()">
<label>{{uid}}</label>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label>Role : </label>
<input type="text" class="form-control" name="role" ng-model="usertype" readonly>
</div>
<div class="col-md-6">
<label>Email : </label>
<input type="email" class="form-control" name="email" ng-model="email" ng-readonly="!editInfo">
</div>
</div>
</div>
</form>
</div>
The problem is you are defining uid but uid is not even present in the controller, is this a typo?
For helping you debug the issue. I have mocked up the HTTP request, the code seems fine, except for this one typo.
Before:
<div class="card-body">
<h6 class="card-title mb-1 large">
<a href="#" class="col-xs-10" >
<h4>FirstName: {{f_name}}, </h4>
<label >ID: {{uid}}</label>
</a>
<label class="btn btn-primary pull-right" name="editInfo"><input type="checkbox" class="hidden" for="editInfo" name="editInfo" ng-model="editInfo"> <ic class="fa fa-pencil"></i></label>
<form name="myForm" ng-submit="saveProfile()">
<label>{{uid}}</label>
After:
<div class="card-body">
<h6 class="card-title mb-1 large">
<a href="#" class="col-xs-10" >
<h4>FirstName: {{f_name}}, </h4>
<label >ID: {{id}}</label>
</a>
<label class="btn btn-primary pull-right" name="editInfo"><input type="checkbox" class="hidden" for="editInfo" name="editInfo" ng-model="editInfo"> <ic class="fa fa-pencil"></i></label>
<form name="myForm" ng-submit="saveProfile()">
<label>{{id}}</label>
JSFiddle Demo
**my angular function **
self.login = function () {
loginService.login(self.user).success(function (response) {
sessionService.set("token", response.response.token);
$window.location.href = "/camera";
}).error(function (response) {
flashService.showError(response.message);
});
}
my html code
<form name="myForm" class="row" ng-submit = loginCtrl.login() novalidate>
<label>Username or email</label>
<div class='form-group' ng-class="{ 'has-error' : myForm.userName.$invalid && !myForm.userName.$pristine }">
<input type="text" name="userName" class="input-block-level form-control" placeholder="Your username or email" ng-model = "loginCtrl.user.email" required/>
<p ng-show="myForm.userName.$invalid && !myForm.userName.$pristine" class="help-block">Please enter the username or email.</p>
</div>
<label >Password <a class="password" href="javascript:void(0)" data-toggle="modal" ng-click="loginCtrl.openForgetPasswordModal('md')" >forgot it?</a></label>
<div class='form-group' ng-class="{ 'has-error' : myForm.password.$invalid && !myForm.password.$pristine }">
<input type="password" name= "password" class="input-block-level form-control margin-none" placeholder="Your password" ng-model = "loginCtrl.user.password" required/>
<p ng-show="myForm.password.$invalid && !myForm.password.$pristine" class="help-block">Please fill up the password.</p>
</div>
<div class="separator bottom"></div>
<div class="col-md-8 padding-none ">
<div class="uniformjs"><label class="checkbox theme-color"><input type="checkbox" value="remember-me" ng-model = "loginCtrl.remember" ng-click="loginCtrl.rememberMe()"remember-me>Remember me</label>
</div>
</div>
<div class="col-md-4 pull-right padding-none">
<button class="btn btn-block btn-primary" type="submit">Sign In</button>
</div>
</form>
I want when i click on login button then it will be redirect on seprate page.but window location is not working here.
use this:
$location.path('/camera');
I'm using the angular-ui Routing, but when nesting it keeps loading the main index file over and over again I think, I'm working in Visual Studio and it starts lagging when I go to that page, but the other ones are no problem
this is the code in routing:
$stateProvider
.state("stateOne", {
url: "/stateOne",
templateUrl: "/routesDemo/one"
})
.state("stateTwo", {
url: "/stateTwo?donuts",
templateUrl: function(params) { return "/routesDemo/two?donuts=" + params.donuts; }
})
.state("stateThree", {
url: "/stateThree",
templateUrl: "/routesDemo/three"
})
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: ProductJsController
})
.state("loginRegister", {
url: "/loginRegister?returnUrl",
views: {
"": {
templateUrl: "/Account/LoginRegister",
},
"login#loginRegister": {
templateUrl: "/Account/Login",
controller: LoginController
},
"register#loginRegister": {
templateUrl: "/Account/Register",
controller: RegisterController
}
}
});
The content of LoginRegister is as following:
<div ui-view="login"></div>
<div ui-view="register"></div>
Login
<div class="col-lg-6">
<div class="bs-component">
<form class="form-horizontal" ng-submit="login()">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="emailAddress" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<div class="form-control-wrapper">
<input type="email" class="form-control empty" ng-model="loginForm.emailAddress" id="emailAddress" placeholder="Email"><span class="material-input"></span></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<div class="form-control-wrapper">
<input type="password" class="form-control empty" ng-model="loginForm.password" id="password" placeholder="Password"><span class="material-input"></span></div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="loginForm.rememberMe"><span class="ripple"></span><span class="check"></span> Remember me?
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
<div id="source-button" class="btn btn-primary btn-xs" style="display: none;">
< >
<div class="ripple-wrapper"></div>
</div>
</div>
<div class="alert alert-dismissable alert-danger" ng-if="loginForm.loginFailure">
<button type="button" class="close" data-dismiss="alert" ng-click="closeError()">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
Register
<form ng-submit="register()">
<label for="emailAddress">Email Address:</label>
<input id="emailAddress" type="text" ng-model="registerForm.emailAddress" required/>
<label for="password">Password:</label>
<input id="password" type="password" ng-model="registerForm.password" required/>
<label for="confirmPassword">Confirm Password:</label>
<input id="confirmPassword" type="password" ng-model="registerForm.confirmPassword" required/>
<button type="submit">Register</button>
</form>
<div ng-if="loginForm.registrationFailure">
D'oh!
</div>
Please provide the index HTML file. Your view may not be able to be rendered if you controller is not loading. Please also provide one of your controller files.
You need to enclose your controller names in quotes, the same way they are in the controller.
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: ProductJsController
Looks like it should be:
.state("stateAllProducts", {
url: "/Products",
templateUrl: "/product/all",
controller: 'ProductJsController'
Without seeing more code, this is the best I can provide.