I need to validate login function. I added my Login.html file and LoginController.js file. I want to validate this from using this javascript. This is angularjs code. after that I have to set php url for this code.
Login.html
$scope.submitForm = function() {
var user_email = user_email;
var user_password = user_password;
if(user_email && user_password){
console.log(user_email);
}
};
<div ng-controller="LoginController">
<form name="userForm" ng-submit="submitForm()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span> </br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button onclick="location.href='#/login/:friendId/register/';" class="button button-block button-positive activated">Register</button>
</form>
</div>
Made changes in your provided code,on click of Register/ Sign In you can call submitForm() function through ng-click to evaluate the form values.Check the below code snippet for working model.
angular.module('myApp', ['ng'])
.controller('LoginController', ['$scope',
function($scope) {
$scope.user = {};
$scope.submitForm = function() {
var user_email = $scope.user.user_email;
var user_password = $scope.user.user_password;
if (user_email && user_password) {
console.log(user_email);
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<form name="userForm">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" name="user_email" ng-model="user.user_email" required>{{user.user_email}}
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="user_password" ng-model="user.user_password" required>{{user.user_password}}
</label>
</div>
<span ng-show="userForm.user_email.$touched && userForm.user_email.$invalid">The Username is required.</span>
</br>
<span ng-show="userForm.user_password.$touched && userForm.user_password.$invalid">The Password is required.</span>
<button class="button button-block button-positive activated">Sign In</button>
<button ng-click="submitForm()" class="button button-block button-positive activated">Register</button>
</form>
</div>
Related
my scope function "login()" is not working when the user enter with the "ng-click" , why is not working? please help!
HTML
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
Funcion on controller
.controller('loginCtrl', ['$scope', "Auth", '$state',
function ($scope, Auth, $stateParams) {
$scope.login = function() {
$signin_email = $scope.userloginForm.email.$modelValue;
$signin_password = $scope.userloginForm.password.$modelValue;
// sign in
Auth.$signInWithEmailAndPassword($signin_email, $signin_password)
.then(function(firebaseUser) {
//$scope.message = "User created with uid: " + firebaseUser.uid;
alert(firebaseUser.email + " logged in successfully!");
}).catch(function(error) {
alert(error.message);
//$scope.error = error;
});
};
}])
That is the form :
<form id="login-form1" name="$parent.userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
Try to use $scope.member.email instead of $scope.userloginForm.email.$modelValue and $scope.member.password instead of $scope.userloginForm.password.$modelValue inside login function, cause into this properties Angular writes from form's inputs. Of course, an the top of your controller, you should have $scope.member = {}. Also, I think your form's name should be userloginForm, not $parent.userloginForm. And one more thing - if you don't have to, you should not use ng-click() to submit form, you should ng-submit="login" on your form and <button id="login-button1" class="button button-assertive button-block icon-right ion-log-in type="submit">Entrar</button>
Instead of using $scope.userloginForm.email.$modelValue you can directly pass ng-model object as a parameter in the login function.
In HTML :
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
In controller :
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.login = function(member) {
var signin_email = member.email;
var signin_password = member.password;
console.log(signin_email);
console.log(signin_password);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form id="login-form1" name="userloginForm" class="list" >
<div class="spacer" style="height: 40px;"></div>
<ion-list id="login-list1">
<label class="item item-input" id="login-input1">
<span class="input-label">Email :</span>
<input type="text" name="email" ng-model="member.email" placeholder="">
</label>
<label class="item item-input" id="login-input2">
<span class="input-label">Senha :</span>
<input type="password" ng-model="member.password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>
<a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a>
</form>
</div>
I have login form,
i cleared the form after form submitssion,and set form as Pristine mode.
but error message is still remain.
Here is my code,
<form name="loginForm" ng-submit="loginForm.$valid && login(user)" novalidate style="position: relative">
<div class="log-input-frm mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
<div class="col-sm-12 f_name">
<input ng-model="user.username" name="username" type="email" placeholder="Email address" required="">
<div ng-show="loginForm.$submitted || loginForm.username.$touched" ng-model="loginForm.username">
<span ng-show="loginForm.username.$error.required" class="text-danger">Please enter email address.</span>
<span ng-show="loginForm.username.$error.email" class="text-danger">Please enter valid email address.</span>
</div>
</div>
</div>
<div class="log-input-frm mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
<div class="col-sm-12 f_name">
<input ng-model="user.password" name="password" type="password" placeholder="Password" required="">
<div ng-show="loginForm.$submitted || loginForm.password.$touched" ng-model="loginForm.password">
<span ng-show="loginForm.password.$error.required" class="text-danger">Please enter password.</span>
</div>
</div>
</div>
<div class="buttons">
<span class="signup pull-left">
<a ui-sref="forgotpassword">Forgot password</a>
</span>
<div class="link">
<div class="link" style="padding-bottom:0;">
<md-button type="submit" class="md-raised primary" > Login </md-button>
</div>
</div>
</div>
</form>
controller code to reset form and set in pristine mode.
$scope.loginForm.$setPristine();
$scope.loginForm.$setUntouched();
$scope.user = {};
Where am i wrong???
I resolved my problem by using timeout function
$scope.user = {};
$timeout(function () {
$scope.loginForm.$setPristine();
$scope.loginForm.$setUntouched();
$scope.loginForm.$submitted = false;
});
I'm doing something wrong but cant see what. I've followed the angular js docs and the validations are not working:
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
with a controller as follows:
'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {
$scope.requestCallback = function () {
alert("form callback");
};
}]);
However, I can't get my error messages to appear. Also the ng-minlength are not restricting the form submission? Am I missing something simple here?
Your code seems to work fine.
Regarding the submission restriction on error - you have to explicitly use angular's valiation by doing something like:
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
Here's a snippet:
function Ctrl($scope) {
$scope.requestCallback = function() {
alert("form callback");
};
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
<p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
<p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
<p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
</div>
</form>
</div>
</div>
Your form is validating.. in order to call requestCallback() function, you need to bind your form to controller.
Wrap your form inside controller with ng-controller
<div ng-controller="footerController">
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
</div>
</div>
**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 am working on ionic framework.I am trying to create a login page.I want to read data inserted in username and pass word fields in login.html.I tried to read using $scope but that didn't work.I tried to use console.log() to print the variables in console but i am getting an error saying it is "undefined".I am new to ionic and angularjs.
login.html:
<ion-view view-title="Login" name="menuContent">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew()">Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive" ng-click="signNew()">Signup</button>
</label>
</div>
</form>
</ion-content>
</ion-view>
app.js:
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('app.signup', {
url: '/signup',
views: {
'menuContent': {
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
}
}
})
controller.js:
//start LoginCtrl
.controller('LoginCtrl', ['$scope','$state','$http' , function($scope,$state,$http) {
$scope.signNew=function(){
console.log("sas");
$state.go('app.signup');
console.log("sas");
};
$scope.loginNew = function($scope){
console.log($scope.user+" daww");
console.log($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
//end LoginCtrl
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------//
//start SignupCtrl
.controller('SignupCtrl', ['$scope', function($scope) {
}]);
//end SignupCtrl
When you use form in your HTML then go for ng-submit not
ng-click, because ng-click not validate your html. Example: If you use required in input box then ng-click not validate required so use
ng-submit
See this Documentation ng-submit
Note: It is not compulsory to use ng-submit it is just and best
practices which we have to follow
And as per you problem you have to pass one object from html and get this object in controller. it will solve your problem.
<form ng-submit="loginNew(login)">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="login.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="login.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" >Log in</button>
</label>
<label class="item">
<span class="input-label">New user?</span>
<button class="button button-block button-positive">Signup</button>
</label>
</div>
</form>
Now in controller :
$scope.loginNew = function(mylodinObject){
console.log(mylodinObject.user+" daww");
console.log(mylodinObject.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+mylodinObject.user+"&Password="+mylodinObject.pass)
.success(function(data) {
alert("Login was Successful.");
console.log("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
Some time if you want to use both ng-click and ng-submit then you will be in problem so for that refere this link it will solve your problem :ng-click and ng-submit
.controller('LoginCtrl', ['$log','$scope','$state','$http' , function($log,$scope,$state,$http) {
$log.debug($scope.user);
$log.debug($scope.pass);
Need not pass $scope as the parameter here
$scope.loginNew = function(){
$log.debug($scope.user);
$log.debug($scope.pass);
$http.get("http://demo.pillocate.com/webservice/Login?Username="+$scope.user+"&Password="+$scope.pass)
.success(function(data) {
alert("Login was Successful.");
$log.debug("Login success" + data);
})
.error(function(data) {
alert("Wrong Credentials!!Username or Password was Wrong.")
});
}
}])
Design the form as follows
<form >
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Username</span>
<input type="text" ng-model="xxx.user" placeholder="Email or Phone">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" ng-model="xxx.pass" placeholder="Password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="loginNew(xxx)">Log in</button>
</label>
</div>
</form>
and in controller
$scope.loginNew = function(xxx){
console.log(xxx); // this gives the user and pass variables from form
console.log(xxx.user); //for user
console.log(xxx.pass); //for pass
};