css - How to position ngshow messages in angular js -
how have ng-show messages beside text box rather underneath it. right displaying validation messages underneath input box.
<!doctype html> <html ng-app="myapp" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script> "use strict"; var app = angular.module('myapp', []); app.controller('mainctrl', function ($scope) { $scope.cityarray = ["hyderabad", "secunderabad", "delhi", "mumbai"]; $scope.submit = function ($event) { if ($scope.myform.$invalid) { // or other update $scope.myform.$submitted = true; $event.preventdefault(); } }; }); app.directive('uniqueusername', function ($http) { return { restrict: 'a', require: 'ngmodel', link: function (scope, element, attrs, ngmodel) { element.bind('blur', function (e) { ngmodel.$setvalidity('unique', true); $http.post('checkusername2.do').success(function (data) { if (data) { ngmodel.$setvalidity('unique', false); } }); }); } }; }); </script> </head> <body ng-controller="mainctrl"> <div class="container"> <div class="col-md-6 col-md-offset-0"> <div class="panel panel-login"> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <h2 class="text-muted">registration form</h2> <div> <form name="myform" action="registrationservlet.do" method="post" > first name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-za-z]{3,20}/" ng-model="uname" unique-username="" placeholder="first name" required/> <span style="color:red" ng-show="myform.uname.$error.pattern">first name cannot less 3 letters no digits</span> <span style="color:red" class="error" ng-if="myform.$submitted && myform.uname.$error.required">please fill field above<br></span><br/> <span style="color:red" class="hide-while-in-focus" ng-show="myform.uname.$error.unique">username exist<br/></span> <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">submit</button> </form> </div> </div> </div> </div> </div> </div> </div> </body> </html> here's plunker
you don't have space right display error messages beside input box. putting error messages above submit button cause minor ui issue: each error, form submit-button flicker vertically. viz. - submit form without entering input error message. - type/erase character in input box see flickering
workaround:
either keep error messages below submit button or provide dedicated height error messages avoid undesirable effects or both
<form name="myform" action="registrationservlet.do" method="post" > first name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-za-z]{3,20}/" ng-model="uname" unique-username="" placeholder="first name" required/><br><br> <button class="form-control btn btn-success" type="submit" ng-click="submit($event)">submit</button> <div style="height=100px"> <span style="color:red" ng-show="myform.uname.$error.pattern">first name cannot less 3 letters no digits</span> <span style="color:red" class="error" ng-if="myform.$submitted && myform.uname.$error.required">please fill field above<br></span><br/> <span style="color:red" class="hide-while-in-focus" ng-show="myform.uname.$error.unique">username exist<br/></span> </div> </form> 
Comments
Post a Comment