I am new to angularjs. I have created simple login page. The code is working fine, but my validation and credentials have some problem. I found some clues in few sites, but those answers din't provide the proper information for my solution. The error that I am facing is in the validation. When I enter the invalid mailid and password it should pop-up error message . But I could not achieve it.
HTML :
`<form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid center" name="logform"><br/><br>`
<div class="form-group col-md-4">
<label form="emailinput"><b>Email</b></label>
<input type="email" class="form-control" name="uname" id="emailinput" placeholder="you#example.com" ng-model="username" ng-pattern="emailFormat">
<span ng-show="logform.uname.$dirty.username && loginform.uname.$invalid"></span>
<span style="color: Red" ng-show="logform.uname.$valid">* Email is required</span>
<span style="color: Red" ng-show="logform.uname.$error.username">* Invalid ID </span>
</div>
<div class="form-group col-md-4">
<label form="pwdinput"><b>Password</b></label>
<input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password">
<span style="color: red" ng-show="logform.pwd.$dirty && loginform.pwd.$invalid"></span>
<span ng-show="logform.pwd.$error.$valid">* Password is required</span>
<span ng-show="logform.pwd.$error.pwd">* Invalid Password</span>
</div>
<div class="col-md-4">
<button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="submit()" ng-Disabled="logform.username.$dirty && loginform.username.$invalid || logform.pwd.$dirty && loginform.pwd.$invalid">Login</button>
</div>
AngularJs :
`var app = angular.module('logapp',['toastr']);`
app.factory('authentication', function() {
return {
isAuthenticated: false,
user: null
}
});
app.controller('credientials', function($scope,toastr,authentication) {
$scope.loginform = function (username, password) {
if ($scope.username === 'admin#evol.com' && $scope.password === '123') {
authentication.isAuthenticated = true;
$location.path("/home");
} else {
toastr.error('Invalid username and password');
}
};
});
Kindly read the snippet below and alter your code to setValidity() based on condition.
var app = angular.module('logapp', []);
app.factory('authentication', function() {
return {
isAuthenticated: false,
user: null
}
});
app.controller('credientials', function($scope, authentication) {
$scope.loginform = function(isValid) {
$scope.logform.uname.$setValidity("username", true);
$scope.logform.pwd.$setValidity("pwd", true);
if (isValid) {
if ($scope.username == 'admin#evol.com' && $scope.password == '123') {
alert("success");
authentication.isAuthenticated = true;
} else {
$scope.logform.uname.$setValidity("username", false);
$scope.logform.pwd.$setValidity("pwd", false);
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="logapp" ng-controller="credientials">
<form ng-submit="loginform(logform.$valid)" class="ng-scope ng-pristine ng-valid center" name="logform" novalidate role="form">
<div class="form-group col-md-4">
<label form="emailinput"><b>Email</b></label>
<input type="email" class="form-control" name="uname" id="emailinput" placeholder="you#example.com" ng-model="username" ng-pattern="emailFormat" required>
<span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.required">* Email is required</span>
<span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.username">* Invalid ID </span>
</div>
<div class="form-group col-md-4">
<label form="pwdinput"><b>Password</b></label>
<input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password" required>
<span ng-show="logform.$submitted && logform.pwd.$error.required">* Password is required</span>
<span ng-show="logform.$submitted && logform.pwd.$error.pwd">* Invalid Password</span>
</div>
<div class="col-md-4">
<button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
<button class="btn btn-primary" type="submit">Login</button>
</div>
</form>
</body>
Related
I have implemented validation system in forms and it working fine.
Here is my form:
<form name='addContactForm'>
<div class="form-group">
<label for="userid">USER ID :</label><br>
<input ng-model="formModel.userid" class="form-control" name="userid" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.userid.$dirty && addContactForm.userid.$invalid">
<span ng-show="addContactForm.userid.$error.required"> User is required.</span>
<span ng-show="addContactForm.userid.$error.number">Invalid userID</span>
</div>
<div class="form-group">
<label for="name">NAME :</label><br>
<input ng-model="formModel.name" class="form-control" name="name" required/>
<span style="color:red" ng-show="addContactForm.name.$dirty && addContactForm.name.$invalid">
<span ng-show="addContactForm.name.$error.required"> Name is required.</span>
<span ng-show="addContactForm.name.$error.lettersOnly">Invalid Name</span>
</span>
</div>
<div class="form-group">
<label for="email">Email :</label> <br>
<input type="email" name="email" class="form-control" ng-model="formModel.email" ng-pattern="/[\w\d\.\_]+\#[\w\d]+\.[\w]{3}/" required>
<span style="color:red" ng-show="addContactForm.email.$dirty && addContactForm.email.$invalid">
<span ng-show="addContactForm.email.$error.required">Email is required.</span>
<span ng-show="addContactForm.email.$error.pattern">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label for="phone">Phone :</label> <br>
<input ng-model="formModel.phone" class="form-control" name="phone" restrict-input="{type: 'digitsOnly'}" required>
<span style="color:red" ng-show="addContactForm.phone.$dirty && addContactForm.phone.$invalid">
<span ng-show="addContactForm.phone.$error.required"> Phone Number is required.</span>
</span>
</div>
<div class="row justify-content-center">
<button class="btn btn-primary" ng-disabled="addContactForm.$invalid" ng-click="PassDataToDisplyThroughUrl()">Submit</button> <br>
</div>
</form>
</div>
Note that, above things are working fine.
my controller is below:
app.controller('formCtrl', ['$scope', '$location', '$http',
function($scope, $location, $http) {
$scope.formModel = {};
$scope.PassDataToDisplyThroughUrl = function() {
var url = 'display/' + $scope.formModel.userid + '/' + $scope.formModel.name
+ '/' + $scope.formModel.email + '/' + $scope.formModel.phone;
$location.path(url);
$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
.then(function(response){
$scope.successCallBack = 'You have successfully saved your contact';
}, function(response){
$scope.errorCallBack = 'Opps! Unable to save your data, please check your network';
});
$scope.formModel = {};
$scope.addContactForm.$setPristine();
};
}]);
After i clicking on submit button -- it clear the form and send to the server. but the problem is, it shows me the validation error later
Can anyone fix me this issue?
My HTML form data is not POST
HTML View Page:-
<div class="col-sm-12">
<div class="card-box">
<form class="form-inline" name="addstock"
ng-submit="saveStockPurchaseInvoice()">
<h3 class="m-t-0 m-b-30 header-title text-center">Invoice
Details</h3>
<div class="row" style="margin-bottom: 20px;">
<div class="form-group col-md-3" style="">
<select name="supplier" ng-model="productStock.suppliername"
class="form-control" required="">
<option value="">Select a Supplier</option>
<option ng-repeat="allsupplier in supplier"
value="{{allsupplier.supplier_id}}">
{{allsupplier.supplier_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.supplier.$touched && addstock.supplier.$invalid">Supplier
is Required.</span>
</div>
<div class="form-group col-md-3">
<input type="text" class="form-control"
ng-model="productStock.invoice" id="invoice" name="invoice"
placeholder="Enter Invoice Number" required> <br> <span
style="color: red"
ng-show="addstock.invoice.$touched && addstock.invoice.$invalid">Enter
Invoice Number.</span>
</div>
<div class="form-group col-md-3">
<input type="date" name="productdate" id="productdate"
ng-model="productStock.productdate" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productdate.$touched && addstock.productdate.$invalid">Date
is Required.</span>
</div>
</div>
<h3 class="m-t-0 m-b-30 header-title text-center">ITEMS</h3>
<div ng-repeat="productStock in productStocks"
style="margin-bottom: 10px;">
<div class="form-group">
<!--<input type="text" name="product_name" ng-model="productsStock.product_name" required="" placeholder="Product Name" class="form-control" id="product_name">-->
<select name="productStock_name"
ng-model="productStock.productStock" class="form-control"
required="">
<option value="">Select a Product</option>
<option ng-repeat="products in allproducts"
value="{{products.product_id}}">
{{products.product_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.productStock_name.$touched && addstock.productStock_name.$invalid">Product
Name Required.</span>
</div>
<div class="form-group">
<input id="productstock_qty" type="number" min="1" required=""
name="productstock_qty" ng-model="productStock.productstock_qty"
placeholder="Product Quantity" class="form-control"> <br>
<span style="color: red"
ng-show="addstock.productstock_qty.$touched && addstock.productstock_qty.$invalid">Product
Quantity required.</span>
</div>
<div class="form-group">
<input id="productstock_price" type="number" min="1"
ng-model="productStock.productstock_price"
name="productstock_price" placeholder="Product Price"
class="form-control" maxlength="15" size="10" required="">
<br> <span style="color: red"
ng-show="addstock.productstock_price.$touched && addstock.productstock_price.$invalid">Price
required.</span>
</div>
<div class="form-group">
<select name="product_units"
ng-model="productStock.productstock_units" class="form-control"
required="">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.product_units.$touched && addstock.product_units.$invalid">Units
is required.</span>
</div>
<div class="form-group">
<input id="productstock_cgst" type="text"
ng-model="productStock.productstock_cgst" name="productstock_cgst"
placeholder="CGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_cgst.$touched && addstock.productstock_cgst.$invalid">required.</span>
</div>
<div class="form-group">
<input id="productstock_sgst" type="text"
ng-model="productStock.productstock_sgst" name="productstock_sgst"
placeholder="SGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_sgst.$touched && addstock.productstock_sgst.$invalid">required.</span>
</div>
<!--<div class="form-group">-->
<!-- <input id="productstock_gst" type="text" ng-model="productStock.productstock_gst" ng-keydown="keydownevt()" name="productstock_gst" placeholder="GST" class="form-control" maxlength="10" size="6" required="">-->
<!-- <br>-->
<!-- <span style="color:red" ng-show="addstock.productstock_gst.$touched && addstock.productstock_gst.$invalid">required.</span> -->
<!--</div>-->
<div class="form-group">
<input id="productstock_total" type="text"
ng-model="productStock.productstock_total"
name="productstock_total" placeholder="Total" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_total.$touched && addstock.productstock_total.$invalid">Total
is required</span>
</div>
<button class="btn btn-danger btn-sm" ng-show="$last"
ng-click="removeStock()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<!-- ng-repeat close for add dynamic product field-->
<div class="form-group text-right m-b-0">
<button class="addfields btn btn-info waves-effect waves-light"
ng-click="addstockproduct()">Add Stock</button>
</div>
<div class="form-group text-right m-b-0 pull-right"
style="margin-top: 10px;">
<button type="submit" ng-click="" class="btn btn-primary">Save</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
angularjs Controller:-
//Add Dynamic Fields.
$scope.productStocks = [{id: 'firstField2'}];
$scope.addstockproduct = function(){
var newItemNo2 = $scope.productStocks.length+1;
$scope.productStocks.push({'id':'field'+newItemNo2});
}
$scope.removeStock = function() {
var itemLast2 = $scope.productStocks.length-1;
$scope.productStocks.splice(itemLast2);
};
angularjs code for add records:-
$scope.productStock={};
$scope.suplier_succ = false;
$scope.suplier_err = false;
$scope.saveStockPurchaseInvoice=function(){
$http({
method: 'post',
url: 'stock/insert_stock',
data: $scope.productStock,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data)
{
if (data == 1) {
$scope.suplier_succ = $scope.suplier_succ ? false : true;
$scope.succ = "Stock added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
// $scope.formsup = {}; // clears input fields
// $scope.addsuppler.$setPristine();
// $scope.addsuppler.$setUntouched();
} else{
$scope.suplier_err = $scope.suplier_err ? false : true;
$scope.err = "Stock insertion failed! Try again.";
}
});
};
Codeigniter Controller:-
public function insert_stock(){
$request = json_decode(file_get_contents('php://input'), TRUE);
print_r($request);
}
enter image description here
My Result:-(All Records value is not POST)
enter image description here
I had the same problem with form data post.
I was able to resole it by setting headers: { 'Content-Type': undefined } and transformRequest: angular.identity in http request.
below is my sample code.
function Upload(containerName, objFile, objParams) {
var deferred = $q.defer();
var frmData = new FormData();
frmData.append('file', objFile);
var req = {
method: 'POST',
url: window.APIBaseUrl + 'containers/' + containerName + '/upload',
data: frmData,
params: objParams,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity,
dataType: "json"
}
$http(req).then(function (response) {
deferred.resolve(response.data);
}, function (err) {
deferred.reject(handleHttpError(err));
$log.error("Error in upload", err);
});
return deferred.promise;
}
This May help you
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-sm-6" style="width:50%;">
<div class="card-box">
<form class="form-inline" name="addstock"
ng-submit="saveStockPurchaseInvoice()">
<h3 class="m-t-0 m-b-30 header-title text-center">Invoice
Details</h3>
<div class="row" style="margin-bottom: 20px;">
<div class="form-group col-md-3" style="">
<select name="supplier" ng-model="productStock.suppliername"
class="form-control" required="">
<option value="">Select a Supplier</option>
<option ng-repeat="allsupplier in supplier"
value="{{allsupplier.supplier_id}}">
{{allsupplier.supplier_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.supplier.$touched && addstock.supplier.$invalid">Supplier
is Required.</span>
</div>
<div class="form-group col-md-3">
<input type="text" class="form-control"
ng-model="productStock.invoice" id="invoice" name="invoice"
placeholder="Enter Invoice Number" required> <br> <span
style="color: red"
ng-show="addstock.invoice.$touched && addstock.invoice.$invalid">Enter
Invoice Number.</span>
</div>
<div class="form-group col-md-3">
<input type="date" name="productdate" id="productdate"
ng-model="productStock.productdate" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productdate.$touched && addstock.productdate.$invalid">Date
is Required.</span>
</div>
</div>
<h3 class="m-t-0 m-b-30 header-title text-center">ITEMS</h3>
<div ng-repeat="item in productStocks track by $index"
style="margin-bottom: 10px;">
<div class="form-group">
<!--<input type="text" name="product_name" ng-model="productsStock.product_name" required="" placeholder="Product Name" class="form-control" id="product_name">-->
<select name="productStock_name"
ng-model="productStock.items[$index].productStock" class="form-control"
required="">
<option value="">Select a Product</option>
<option ng-repeat="products in allproducts"
value="{{products.product_id}}">
{{products.product_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.productStock_name.$touched && addstock.productStock_name.$invalid">Product
Name Required.</span>
</div>
<div class="form-group">
<input id="productstock_qty" type="number" min="1" required=""
name="productstock_qty" ng-model="productStock.items[$index].productstock_qty"
placeholder="Product Quantity" class="form-control"> <br>
<span style="color: red"
ng-show="addstock.productstock_qty.$touched && addstock.productstock_qty.$invalid">Product
Quantity required.</span>
</div>
<div class="form-group">
<input id="productstock_price" type="number" min="1"
ng-model="productStock.items[$index].productstock_price"
name="productstock_price" placeholder="Product Price"
class="form-control" maxlength="15" size="10" required="">
<br> <span style="color: red"
ng-show="addstock.productstock_price.$touched && addstock.productstock_price.$invalid">Price
required.</span>
</div>
<div class="form-group">
<select name="product_units"
ng-model="productStock.items[$index].productstock_units" class="form-control"
required="">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.product_units.$touched && addstock.product_units.$invalid">Units
is required.</span>
</div>
<div class="form-group">
<input id="productstock_cgst" type="text"
ng-model="productStock.items[$index].productstock_cgst" name="productstock_cgst"
placeholder="CGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_cgst.$touched && addstock.productstock_cgst.$invalid">required.</span>
</div>
<div class="form-group">
<input id="productstock_sgst" type="text"
ng-model="productStock.items[$index].productstock_sgst" name="productstock_sgst"
placeholder="SGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_sgst.$touched && addstock.productstock_sgst.$invalid">required.</span>
</div>
<!--<div class="form-group">-->
<!-- <input id="productstock_gst" type="text" ng-model="productStock.productstock_gst" ng-keydown="keydownevt()" name="productstock_gst" placeholder="GST" class="form-control" maxlength="10" size="6" required="">-->
<!-- <br>-->
<!-- <span style="color:red" ng-show="addstock.productstock_gst.$touched && addstock.productstock_gst.$invalid">required.</span> -->
<!--</div>-->
<div class="form-group">
<input id="productstock_total" type="text"
ng-model="productStock.items[$index].productstock_total"
name="productstock_total" placeholder="Total" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_total.$touched && addstock.productstock_total.$invalid">Total
is required</span>
</div>
<button class="btn btn-danger btn-sm" ng-show="$last"
ng-click="removeStock()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<!-- ng-repeat close for add dynamic product field-->
<div class="form-group text-right m-b-0">
<button class="addfields btn btn-info waves-effect waves-light"
ng-click="addstockproduct()">Add Stock</button>
</div>
<div class="form-group text-right m-b-0 pull-right"
style="margin-top: 10px;">
<button type="submit" ng-click="" class="btn btn-primary">Save</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
</div>
<div style="width:50%">
<pre>{{productStock | json}}</pre>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.productStocks = [{id: 'firstField2'}];
$scope.supplier = [{supplier_id:1, supplier_name:'abc'}];
$scope.allproducts = [{ product_name:'qwerty',product_id:1 }];
$scope.allunits = [{ unit_id:1,unit_name:'iop'}];
$scope.addstockproduct = function(){
var newItemNo2 = $scope.productStocks.length+1;
$scope.productStocks.push({'id':'field'+newItemNo2});
}
$scope.removeStock = function() {
var itemLast2 = $scope.productStocks.length-1;
$scope.productStocks.splice(itemLast2);
};
$scope.productStock={};
$scope.suplier_succ = false;
$scope.suplier_err = false;
$scope.saveStockPurchaseInvoice=function(){
$http({
method: 'POST',
url: 'http://abcd/insert', //change to your url
data: JSON.stringify($scope.productStock),
//headers: {'Content-Type': 'application/x-www-form-urlencoded'}
headers: { 'Content-Type': undefined },
transformRequest: angular.identity,
dataType: "json"
// 'Content-Type':'application/json'
}).then(function (response)
{
if (data == 1) {
$scope.suplier_succ = $scope.suplier_succ ? false : true;
$scope.succ = "Stock added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
// $scope.formsup = {}; // clears input fields
// $scope.addsuppler.$setPristine();
// $scope.addsuppler.$setUntouched();
} else{
$scope.suplier_err = $scope.suplier_err ? false : true;
$scope.err = "Stock insertion failed! Try again.";
}
});
};
//$request = json_decode(file_get_contents('php://input'), TRUE);
// print_r($request);
});
</script>
</body>
</html>
When I try to login with invalid username and password then it will show message as "Invalid username or password".
But if it invalid username or password then password field as to get reset.
Can anyone please help me how to do it?
My controller :
function login() {
vm.dataLoading = true;
var baseUrl = $location.$$absUrl.split('#')[0];
AuthenticationService.Login(vm.username, vm.password, baseUrl, function (response) {
console.log(response);
if( response.success !== undefined ){
FlashService.Error(response.message, true);
} else {
if (response.json.response.statuscode == 0) {
AuthenticationService.SetCredentials(vm.username, vm.password, response.json.response.candidateid, response.json.response.profilestatus);
//( response.json.response.profilestatus < 15 ) ? $location.path('/otp') : $location.path('/');
$location.path('/')
} else {
FlashService.Error(response.json.response.statusmessage);
vm.dataLoading = false;
}
}
});
};
My html :
<div class=" well tab-content">
<div role="tabpanel" class="tab-pane active" id="personal">
<div class="row">
<div class="col-sm-10 col-lg-offset-1">
<form name="form" ng-submit="vm.login()" role="form">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$invalid }">
<label for="username">Email</label>
<input type="email" placeholder="Email" 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">Email required</span>
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Invalid Email Id</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" placeholder="Password" ng-model="vm.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-info">Login</button>Forgot Password?
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<hr>
</div>
You need to reset the vm.password in the controller because your password input "ng-model" is vm.password
When you get the error, try:
To set password empty:
vm.password = "";
To set password undefined:
vm.password = undefined;
To delete the property password:
delete vm.password;
.controller('SinginCtrl', function($scope, $http, $location, $ionicHistory, $ionicPopup, $ionicLoading, $rootScope, BuynowFactory, $timeout) {
alert("sign");
$scope.myGoBack = function() {
if ($ionicHistory.backView() == null) {
$location.path("/app/home");
};
$ionicHistory.goBack();
};
$scope.inputType = 'password';
$scope.errorMessage = '';
$scope.signIn = function(authorizationForm) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
var email = authorizationForm.emailId;
var password = authorizationForm.password;
var data = {
emailId: email,
passwordId: password
};
$http.post('http://www.otcdeal.com/OTCDealWS/OTCDealLoginService.php', data).then(function successCallback(response) {
$timeout(function() {
$ionicLoading.hide();
}, 0);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="RegistrationForm" ng-submit="registrationDetails(RegistrationDetails)" novalidate>
<h3> REGISTER WITH US </h3>
<div class="list">
<label class="item item-input item-stacked-label min-margin" ng-class="{'has-errors':RegistrationForm.UserName.$invalid && RegistrationForm.UserName.$touched}">
<span class="input-label">Your Name</span>
<input type="text" placeholder="User Name" ng-model="RegistrationDetails.UserName" name="UserName" required>
</label>
<p class="message-error" ng-show="RegistrationForm.UserName.$error.required && RegistrationForm.UserName.$touched">user name is required</p>
<label class="item item-input item-stacked-label" ng-class="{'has-errors':RegistrationForm.LastName.$invalid && RegistrationForm.LastName.$touched}">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name" ng-model="RegistrationDetails.LastName" name="LastName" required>
</label>
<p class="message-error" ng-show="RegistrationForm.LastName.$error.required && RegistrationForm.LastName.$touched">LastName is required</p>
<label class="item item-input item-stacked-label" ng-class="{'has-errors':RegistrationForm.EmailId.$invalid && RegistrationForm.EmailId.$touched}">
<span class="input-label">Email</span>
<input type="email" placeholder="username#domain.com" ng-model="RegistrationDetails.EmailId" name="EmailId" required>
</label>
<p class="message-error" ng-show="RegistrationForm.EmailId.$error.required && RegistrationForm.EmailId.$touched">user name is required</p>
<p class="message-error" ng-show="RegistrationForm.EmailId.$error.email && RegistrationForm.EmailId.$touched">please enter valid email address</p>
<label class="item item-input item-stacked-label" ng-class="{'has-errors': RegistrationForm.Password.$invalid && RegistrationForm.Password.$touched}">
<span class="input-label">Password</span>
<input type="{{inputType}}" placeholder="******" ng-minlength="6" ng-model="RegistrationDetails.Password" name="Password" required>
</label>
<p class="message-error" ng-show="RegistrationForm.Password.$error.required && RegistrationForm.Password.$touched">password is required</p>
<p class="message-error" ng-show="RegistrationForm.Password.$error.minlength && RegistrationForm.Password.$touched">Enter password as minimum 6 or more</p>
<ion-checkbox ng-click="hideShowPassword()" ng-model="filter.blue">Show Password</ion-checkbox>
<p class="message-error">{{Useravailable}}</p>
</div>
<button class="button button-block button-positive" ng-disabled="RegistrationForm.$invalid">SIGNUP</button>
</form>
enter image description hereIn My app first three views
Language view (English,arabic buttons in page)
Sign-view (sign form and have a button create an account(Register) in a page)
Register view(Register form)
sign form controller code:
<label class="item item-input item-stacked-label" ng-class="{'has-errors':LoginForm.MobileNumber.$invalid && LoginForm.MobileNumber.$touched}">
<span class="input-label">Mobile Number</span>
how to clear the has error class and fileds as normal when return from register view to sign view
cache-view="false"
This above line is solved my answer
Hello i am trying to make my validation display on form submit but validation does not work, form gets sent anyway. This is my form:
<form class="form-horizontal col-md-10" role="form" name="authenticationForm" ng-controller="AuthenticationController as authentication" ng-submit="authenticate(authenticationForm.$valid)" novalidate>
<hr>
<br>
<div class="form-group" ng-class="{ 'has-error' : authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted }">
<div class="col-md-4">
<label for="email">Email: </label>
</div>
<div class="col-md-6">
<input type="email" id="email" name="email" ng-model="email" class="form-control" ng-required/>
<p ng-show="authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted" class="help-block">
Your email address is required.
</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted }">
<div class="col-md-4">
<label for="password">Password</label>
</div>
<div class="col-md-6">
<input type="password" id="password" name="password" ng-model="password" class="form-control" ng-required/>
<p ng-show="authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted" class="help-block">
Password is required.
</p>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
</div>
<span class="help-block errorMessages" ng-show="user.input.errors !== undefined">
<div class="alert alert-danger">
<ul class="list">
<li ng-repeat="error in user.input.errors">
<i class="fa fa-times"></i> <% error %>
</li>
</ul>
</div>
</span>
<div class="form-group">
<div class="col-md-12">
<br/>
<hr>
<button class="big-red-button" type="submit">Login <i class="glyphicon glyphicon-chevron-right"></i></button>
<a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a>
</div>
</div>
</form>
This is my controller function:
$scope.authenticate = function(isValid) {
// settting submitted to true
$scope.submitted = true;
// check to make sure the form is completely valid
if (isValid) {
var req = {
method: 'POST',
url: '/auth/login',
headers: {
'X-XSRF-Token': $("meta[name='csrf_token']").attr("content")
},
data: {
email: $scope.email,
password: $scope.password
}
}
$http(req)
.success(function (data, status, headers, config) {
if (data.url !== undefined)
{
window.location.href = data.url;
}
})
.error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
//alert(data);
});
}
};
Can someone please point out what i am doing wrong here? Thanks. :)
You should be able to check $scope.authenticationForm.$valid and prevent the xhr, and you can also visually set the submit button to ng-disabled="authenticationForm.$invalid" so they can't click the button until it's valid. That disabled setting won't prevent submitting the form other ways (enter key, etc).
Have you checked the boolean coming to you? It should be false is there's a validation error.
As you are using controllerAs syntax then you should use each ng-model as
authentication.email & authentication.password
Email Field
<input type="email" id="email" name="email" ng-model="authentication.email"
class="form-control" ng-required/>
Password Field
<input type="password" id="password" name="password" ng-model="authentication.password"
class="form-control" ng-required/>
then inside controller you could get this value by this.email & this.password
That happened to me too. Change ng-required to required, make sure the isValid boolean is actually false if it's not a valid form and take out the novalidate in the form element.
Sometimes the angular $valid is not always accurate. Also, I think you should have put ng-required="true" or some function that returns true, if you are using ng-required.
Check out this article: http://arnaldocapo.com/blog/post/detect-if-html-5-validation-ui-is-present/53
Just replace every where ng-required to required like:
<input type="text" required/>
and also set ng-controller="AuthenticationController " instead of
ng-controller="AuthenticationController as authentication"