ng-submit is not executed - javascript

i have the following form:
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
It is very simple.
Now i have the following controller code:
userModule.controller('UserController', ['$http', '$scope', function($http, $scope) {
this.user = {
username: "",
password: ""
};
$scope.test = function() {
alert($scope.user);
}
}]);
Now when i try to submit my form the test function is never called.
Can anyone tell me why?
Update of my code
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
Form
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
Full code
UserModule
/**
* Created by root on 2/12/15.
*/
(function () {
var userModule = angular.module('user', []);
userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
var vm = this;
vm.user =
{
username: "",
password: ""
};
vm.test = function()
{
alert(vm.user);
}
}]);
userModule.controller('LoginController', function()
{
this.password_form = {};
this.state = 'login';
this.setState = function(value)
{
this.state = value;
};
this.checkState = function(value)
{
return value == this.state;
}
})
})();
FULL html view
<span ng-controller="LoginController as loginCtrl">
<section class="panel panel-default bg-white m-t-lg animated fadeInDownBig" id="login_section" ng-show="loginCtrl.checkState('login');"
xmlns="http://www.w3.org/1999/html">
<form class="panel-body wrapper-lg" id="form_login" ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
<div class="form-group">
<label class="control-label">Brugernavn</label>
<input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
</div>
<div class="form-group">
<label class="control-label">Kodeord</label>
<input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
</div>
<input type="submit" class="btn btn-lb-primary" value="Log på">
</form>
<p class="text-muted text-center wrapper-lg">
<small>
<a href="" ng-click="loginCtrl.setState('order')" id="order_demo">Er du endnu ikke bruger af <span class="text-lb">Learningbank</span>? Tryk her
og få en gratis demo</a>
</small>
</p>
<div class="line line-dashed"></div>
<p class="text-muted text-center">
<small>Glemt kodeord?</small>
</p>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_retrieve" ng-show="loginCtrl.checkState('password')">
<section class="panel-heading">
<h3 class="h3">Glemt dit kodeord?</h3>
<p class="text text-muted">Indtast din mail adresse og få tilsendt en ny</p>
</section>
<form method="POST" class="panel-body wrapper-lg" action="/Users/retrieve_password">
<div class="form-group">
<label class="control-label">E-mail</label>
<input type="email" class="form-control input-lg" name="email" placeholder="E-mail" ng-model="notificationCtrl.mail" ng-required="">
</div>
<button ng-click="loginCtrl.setState('login')" id="btn_back" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> Tilbage</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_demo" ng-show="loginCtrl.checkState('order');">
<section class="panel-heading">
<h3 class="h3">Bestil en gratis demo</h3>
<p class="text text-muted">Udfyld nedenstående formular og få en gratis demo</p>
</section>
<form method="POST" name="demo" class="panel-body wrapper-lg" action="/Users/contact" data-parsley-validate>
<div class="form-group">
<label for="txt_email" class="control-label">E-mail *</label>
<input type="email" class="form-control input-lg" id="txt_email" name="email" placeholder="E-mail"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_fornavn" class="control-label">Fornavn *</label>
<input type="text" class="form-control input-lg" id="txt_fornavn" name="fornavn" placeholder="Fornavn"
data-parsley-trigger="change" required/>
</div>
<div class="form-group">
<label for="txt_efternavn" class="control-label">Efternavn</label>
<input type="text" class="form-control input-lg" id="txt_efternavn" name="efternavn"
placeholder="Efternavn">
</div>
<div class="form-group">
<label for="txt_telefon" class="control-label">Telefon</label>
<input type="text" class="form-control input-lg" id="txt_telefon" name="phone" placeholder="Telefon">
</div>
<div class="form-group">
<label for="txt_virksomhed" class="control-label">Virksomhed *</label>
<input type="text" class="form-control input-lg" id="txt_virksomhed" name="company" placeholder="Virksomhed"
data-parsley-trigger="change" required/>
<small>* påkrævet</small>
<br>
</div>
<button id="btn_back_demo" type="button" class="btn btn-default" ng-click="loginCtrl.setState('login')"><i class="fa fa-arrow-left"></i>Tilbage
</button>
<input type="submit" class="btn btn-primary pull-right" value="Send">
</form>
</section>
<section class="panel panel-default bg-learning padder padder-v m-t-lg animated fadeInDownBig text-center">
<p class="font-semibold">
Velkommen til Learningbank
<br/>
"Dit personlige læringsmiljø"
</p>
<span style="font-size: 12px; margin-bottom: 5px;">Vil du vide mere om Learningbank, kan du se mere <a
href="http://www.learningbank.dk/" target="_blank" class="font-semibold"
style="text-decoration: underline; color:#fff;">her</a></span>
<span style="font-size: 12px;">PLE - Personal Learning Environment</span>
</section>
</span>


Because you are using the controller as syntax you need to bind the test function to this not to $scope.
I would however recommend doing something like
var vm = this;
On this first line. The function then becomes:
vm.test = function() {
alert(vm.user);
}
See https://github.com/johnpapa/angularjs-styleguide#controllers for more details. Highly recommend reading that guide.


For HTML:
No need to use 'userCtrl', you are already binded controller to the form.
For JS:
You are written this.user. But it should be $scope.user
It will work

Related

NodeJS - expressJS - req.body only get one variable

I'm trying to do a login and signUp pages, the login page get all variables right while the signup only transfer the password for some reason.
App.JS:
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
// configure the app to use bodyParser()
app.use(bodyParser.urlencoded({extended: true,}));
app.use(bodyParser.json());
const port = process.env.PORT || 5555;
const usersSignup = [];
const { Client } = require("pg");
//Create static files
app.use(express.static(__dirname));
app.post("/sign-in", function (req, res) {
let email = req.body.email;
let pass = req.body.psw;
index = usersSignup.findIndex((x) => x.user === email && x.pass === pass);
if (index != -1) {
if (email == "Admin#g.com" && pass == "Admin") {
res.redirect("/contact");
}
res.send(
`Welcome!` + JSON.stringify(email) + "Password:" + JSON.stringify(pass)
);
console.log("Hello");
} else {
res.send("User not found");
console.log("User not found");
}
});
app.post("/sign-up", function (req, res) {
console.log(req.body);
var Fname = req.body.firstName;
var Lname = req.body.lastName;
var pass = req.body.Password;
var email = req.body.email;
var pCode = req.body.promoCode;
con.query("select * from users where email=$1", [email], (err, res) => {
var result = JSON.stringify(res.rows[1]);
if (result != null) {
console.log("User exists");
} else {
con.query(
"INSERT INTO users (Name,FamilyName,Email,PromoCode,Password) values($1,$2,$3,$4,$5)",
[Fname, Lname, email, pass, pCode]
);
}
});
SignUp form - req.body only get the password (psw) and nothing else... i tried to disable the modal but same problem.
the associated function are to check that both password are the same and to check password limits (6 digits,capital, etc...)
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Login form (Works fine) - all the data comes like it should.
<form method="POST" action="sign-in">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_account_box_black_18dp.png" alt=""></span>
</div>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter email" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_lock_black_18dp.png" alt=""></span>
</div>
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" title=" Must contain at least one number and one uppercase and lowercase letter and one special
char, and at least 6 or more characters" required>
</div>
<div class="g-recaptcha" data-sitekey="6LeryQAaAAAAACtRGmnGbDekQjszQXzXrH858eJe"></div><br>
<button type="submit" class="btn btn-primary" onclick="return alerts()">Log In</button>
<div class="sign-up"><br>
<hr>
<p><b>Need an account? Sign Up</b></p>
</div>
</form>

You forgot name attributes
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
Should be
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
HTML forms use name for sending data, not id
Do this for all inputs, also you wrote name="psw" on HTML but doing req.body.Password on server part, you need to correct this too.
Fixed HTML:
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password" name="Password"
placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>

You didn't set name attribute for signup!
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword" name="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>

Can you post the content of validFunc() that you used for onClick of password, and also the content of displayForm() used on form submit? I suspect that the missing fields somehow got undefined with your content checking code.

Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined

I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();

Issue with jQuery validate not working against element

I am having an issue using jQuery validate against a form in a current project.
I am sure it is a typo I am missing or something small, but can't sem to figure out why it is occurring.
The error I am getting in the console debugger is: Object doesn't support property or method 'validate'
The bundle configuration file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/ContactForm.js"));
The code snippets are below:
<form action="#Url.Action("UpdateContactInformation", "ContactController")" method="post" role="form" class="form-horizontal" id="contactForm">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<!-- First Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input class="form-control" id="id_firstName" maxlength="75" name="txtFirstName" placeholder="First Name" required="required" title="" type="text" />
</div>
</div>
<!-- Last Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input class="form-control" id="id_lastName" maxlength="75" name="txtlastName" placeholder="Last Name" required="required" title="" type="text" />
</div>
</div>
<!-- Title Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-4">
<input class="form-control" id="id_title" maxlength="75" name="txtTitle" placeholder="Title" required="required" title="" type="text" />
</div>
</div>
<!-- Address Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Address</label>
<div class="col-md-4">
<input class="form-control" id="id_address" maxlength="75" name="txtAddress" placeholder="Address" required="required" title="" type="text" />
</div>
</div>
<!-- City Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">City</label>
<div class="col-md-4">
<input class="form-control" id="id_city" maxlength="75" name="txtCity" placeholder="City" required="required" title="" type="text" />
</div>
</div>
<!-- State Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuStates" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="statesDropDownMenu" aria-labelledby="dropdownMenuStates">
</ul>
</div>
</div>
</div>
<!-- Zip Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">ZipCode</label>
<div class="col-md-4">
<input class="form-control" id="id_zipCode" maxlength="75" name="txtZipCode" placeholder="ZipCode" required="required" title="" type="number" />
</div>
</div>
<!-- Email Primary Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Email Primary</label>
<div class="col-md-4">
<input class="form-control customEmail" id="id_emailPrimary" maxlength="75" name="txtEmailPrimay" placeholder="Email Primary" required="required" />
</div>
</div>
<!-- Email Secondary (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailSecond" maxlength="75" name="txtEmailSecond" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<!-- Email Third (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailThird" maxlength="75" name="txtEmailThird" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span> Submit Contact Info
</button>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval");
#Scripts.Render("~/bundles/custom"); //contains the file I am trying to add $.validate.AddMethod() to
Here is the code for Contact.js
$.validator.addMethod(
"customEmail",
function (value, element) {
var re = new RegExp("/^#{0,2}\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*#{0,2}​‌‌​​$/");
return this.optional(element) || re.test(value);
},
"Please enter a valid email address."
);
$(document).ready(function () {
console.log("Were here.........");
// populateStatesDropDown();
$('#contactForm').validate({ // initialize the plugin
rules: {
txtZipCode: {
required: true,
numeric: true
},
txtEmailPrimay: {
required: true,
customEmail:true
},
txtEmailSecond:{
required:false,
customEmail:true,
},
txtEmailThird: {
required: false,
customEmail:true
}
}
});
populateStatesList();
});
function populateStatesList() {
var url = "Contact/GetStates"; // Don't hard code your url's!
//$("#province_dll").change(function () {
var $statesDropDownMenu = $("#statesDropDownMenu"); // Use $(this) so you don't traverse the DOM again
var listItems = '';
$.getJSON(url, function (response) {
$statesDropDownMenu.empty(); // remove any existing options
console.log(response);
$.each(response, function (index, item) {
console.log("Now - " + item);
listItems += "<li>" + item + "</li>";
});
$statesDropDownMenu.html(listItems);
});
//});
}

You have an extra comma.
txtEmailSecond:{
required:false,
customEmail:true, // Here
},

Error: ng:area Bad Argument in angularjs

Here I am trying to insert data from form attendance-form.blade.php in table attendance on button click using angularJS.
Now the problem when I click button data is not inserted in table instead it gives
Argument 'AttendanceFormController' is not a function, got undefined.
Below are my form and AttendanceController.js.
In attendance-form.blade.php
<div ui-view="attendanceForm">
<div class="mdl-grid demo-content" ng-controller='AttendanceFormController'>
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<form>
<div class="form-group label-static is-empty">
<h3>Create Attendance</h3>
<div class="form-group label-static is-empty">
<input type="text" name="user_id" class="signup form-control"
id="i2" placeholder="user_id" ng-model="attendance.user_id">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="in_or_out" class="signup form-control"
id="i2" placeholder="in_or_out" ng-model="attendance.in_or_out">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="comment" class="signup form-control"
id="i2" placeholder="comment" ng-model="attendance.comment">
</div>
<div class="signup form-group label-static is-empty ripple-container signup">
<input type="button" value="Create Attendance" class="btn btn-raised btn-primary" ng-click="createattendance()">
</div>
</div>
</form>
</div>
</div>
</div>
In AttendanceController.js
app.controller('AttendanceFormController', function ($scope, AttendanceService) {
$scope.attendance = {};
$scope.attendance.user_id;
$scope.attendance.in_or_out;
$scope.attendance.comment;
$scope.loadAttendance = function () {
$scope.attendance = AttendanceService.get({id:$scope.params.id});
}
$scope.createattendance = function () {
attendance = {user_id:$scope.attendance.user_id,
in_or_out:$scope.attendance.in_or_out,
comment:$scope.attendance.comment
}
AttendanceService.post(attendance).then(function(response){
alert('User successfully added in the system.'+'\n'+'Check console.log for response.');
console.log(response.data);
});
}
});

$window.location is not working in ipad only with angular js

**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');

Categories

Resources