<!doctype html> <html> <head> <title>Angularjs Focus Specific Error Input On Form Submit</title> <script src="http://code.angularjs.org/1.2.12/angular.js"></script> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <div data-ng-app="myApp" data-ng-controller="MyController"> <form name="myForm" method="get" validate-form novalidate> <div class="container"> Name: <input type="text" name="name" ng-model="name" ng-required="true" ng-maxlength="10" ng-minlength="5" my-validation/> </div> <div class="container"> Email: <input type="email" name="email" ng-model="email" ng-required="true" my-validation/> </div> <div class="container"> Type: <input type="radio" name="type" ng-model="type" value="A" ng-required="true" my-validation/> A <input type="radio" name="type" ng-model="type" value="B" ng-required="true" my-validation/> B <input type="radio" name="type" ng-model="type" value="C" ng-required="true" my-validation/> C </div> <div><input type="submit" value="Submit"/></div> </form> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("MyController", function($scope) { $scope.name = ""; $scope.email = ""; }); app.directive('validateForm', function () { return { restrict: 'A', link: function ($scope, form) { form.on('submit', function () { $(form).find(".container").css("border", ""); if($scope.myForm.$invalid) { var error = $scope.myForm.$error; for (var key in $scope.myForm.$error) { for (var index = 0; index < $scope.myForm.$error[key].length; index++) { var err = $scope.myForm.$error[key][index]; console.log("Field=" + err.$name + ', Error=' + key); } } var firstInvalid = $(form[0].querySelector('.ng-invalid')); if (firstInvalid.length > 0) { firstInvalid.closest(".container").addClass("error_element").css("border", "2px solid red"); firstInvalid.focus(); return; } } alert("Form Validated"); }); } }; }); app.directive("myValidation", function() { return { restrict: "A", require: "ngModel", link: function(scope, elem, attrs, ctrl) { console.log(attrs) } } }) </script> </body> </html>
Showing posts with label Focus Form. Show all posts
Showing posts with label Focus Form. Show all posts
Tuesday, December 13, 2016
Angularjs Focus Specific Error Input On Form Submit
Subscribe to:
Posts (Atom)