Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate>
- <div>
- {{message}}
- </div>
- <div>
- <label>User Name</label>
- <input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" />
- </div>
- <div>
- <label>Password</label>
- <input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" />
- </div>
- <div>
- <input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" />
- </div>
- </form>
- var demoApp = angular.module('demoApp', []);
- demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) {
- $scope.loginUser = function () {
- var form = document.getElementById("loginform");
- //var form = $scope.loginform; - tried this here...
- //var form = $scope["#loginform"]; tried this
- //var form = angular.element(event.target); - tried this...
- // tried a lot of other combinations as well...
- form.attr("method", "post");
- form.attr("action", "Home/Index");
- form.append("UserName", $scope.user.UserName);
- form.append("Password", $scope.user.Password);
- form.append("RememberMe", false);
- form.submit();
- };
- }]);
- $scope.loginUser = function () {
- if($scope.loginform.$valid){
- user.rememberme=false;
- $http({
- url: 'Home/Index',
- method: "POST",
- data: user
- })
- .then(function(response) {
- // success
- },
- function(response) { // optional
- // failed
- });
- }
- };
- <form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate>
- <div>
- {{message}}
- </div>
- <div>
- <label>User Name</label>
- <input type="text" id="txtUserName" required ng-model="user.UserName" name="UserName" />
- </div>
- <div>
- <label>Password</label>
- <input type="text" id="txtPassword" ng-model="Password" name="user.Password"required />
- </div>
- <div>
- <input type="submit" ng-disabled="myForm.UserName.$invalid || myForm.Password.$invalid" id="btnLogin" title="Save" name="btnLogin" value="Login" />
- </div>
- </form>
- <form id="loginform" name="loginform" ng-submit="loginUser()">
- <div>
- {{message}}
- </div>
- <div>
- <label>User Name</label>
- <input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" required/>
- <div class="help-block" ng-messages="loginform.txtUserName.$error" ng-show="loginform.txtUserName.$touched">
- <p ng-message="required">Username is required.</p>
- </div>
- </div>
- <div>
- <label>Password</label>
- <input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" required/>
- <div class="help-block" ng-messages="loginform.txtPassword.$error" ng-show="loginform.txtPassword.$touched">
- <p ng-message="required">Password is required.</p>
- </div>
- </div>
- <div>
- <input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" ng-click="loginUser()" />
- </div>
- </form>
- var demoApp = angular.module('demoApp', ['ngMessages']);
- demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) {
- $scope.loginUser = function () {
- if($scope.loginform.$valid){
- //Code to run before submitting (but not validation checks)
- } else{
- return false;
- }
- };
- }]);
- <div ng-controller="homeController" ng-init="construct()">
- <form method="post" action="Index" role="form" id="loginform" name="loginform" ng-form-commit novalidate class="ng-pristine ng-invalid ng-invalid-required">
- <div class="form-group">
- <label for="UserName">User ID</label>
- <input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty"
- id="UserName" name="UserName" ng-model="user.UserName" type="text" value=""
- ng-change="userNameValidation = user.UserName.length == 0">
- <span class="field-validation-error text-danger" ng-show="userNameValidation">The User ID field is required.</span>
- </div>
- <div class="form-group">
- <label for="Password">Password</label>
- <input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty"
- id="Password" name="Password" ng-model="user.Password" type="password" value=""
- ng-change="passwordValidation = user.Password.length == 0">
- <span class="field-validation-error text-danger" ng-show="passwordValidation">The Password field is required.</span>
- </div>
- <div>
- <input type="button" id="btnLogin" title="Login" name="btnLogin" value="Login" ng-click="validateUser(loginform)" />
- </div>
- </form>
- </div>
- var demoApp = angular.module('demoApp', []);
- demoApp.factory("commonService", function () {
- return {
- isNullOrEmptyOrUndefined: function (value) {
- return !value;
- }
- };
- });
- //This is the directive that helps posting the form back...
- demoApp.directive("ngFormCommit", [function () {
- return {
- require: "form",
- link: function ($scope, $el, $attr, $form) {
- $form.commit = function () {
- $el[0].submit();
- };
- }
- };
- }]);
- demoApp.controller("homeController", ["$scope", "commonService", function ($scope, commonService) {
- $scope.construct = function construct() {
- $scope.user = { UserName: "", Password: "" };
- };
- $scope.userNameValidation = false;
- $scope.passwordValidation = false;
- $scope.isFormValid = false;
- $scope.validateUser = function ($form) {
- $scope.isFormValid = true;
- $scope.userNameValidation = commonService.isNullOrEmptyOrUndefined($scope.user.UserName);
- $scope.passwordValidation = commonService.isNullOrEmptyOrUndefined($scope.user.Password);
- $scope.isFormValid = !($scope.userNameValidation || $scope.passwordValidation);
- if ($scope.isFormValid === true) {
- $scope.loginUser($form);
- }
- };
- $scope.loginUser = function ($form) {
- $form.commit();
- };
- }]);
- (function(angular) {
- 'use strict';
- function DemoFormCtrl($timeout, $sce) {
- var ctrl = this;
- this.$onInit = function() {
- this.url = $sce.trustAsResourceUrl(this.url);
- /*$timeout(function() {
- ctrl.form.$$element[0].submit();
- });*/
- };
- this.validate = function(ev) {
- console.log('Running validation.');
- if (!this.form) {
- return false;
- }
- };
- }
- angular.module('app', [])
- .component('demoForm', {
- template: `
- <p>To run this demo allow pop-ups from https://plnkr.co</p>
- <hr>
- <p>AngularJS - submit form programmatically after validation</p>
- <form name="$ctrl.form" method="get" target="blank" action="{{::$ctrl.url}}" novalidate
- ng-submit="$ctrl.validate($event)">
- <input type='hidden' name='q' ng-value='::$ctrl.value'>
- <input type='hidden' name='oq' ng-value='::$ctrl.value'>
- <input type="submit" value="submit...">
- </form>`,
- controller: DemoFormCtrl,
- bindings: {
- url: '<',
- value: '<'
- }
- });
- })(window.angular);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement