javascript - Angular how to submit and validate form with <a> -
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" type="text/css" href="login.css"> --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script> </head> <body ng-app="loginapp"> <div class="container"> <div class="login_logo"> </div> <div class="form_container" ng-controller="loginctrl" > <div class="error_msg" ng-if="form_login.username.$dirty" ng-messages="form_login.username.$error"> <div class="alertmsg" ng-message="required">username , password required</div> </div> <div class="form_left"> <form class="form_login" name="form_login" ng-submit="submitform()" novalidate> <div class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></div> <div class="psw"><input id="password" name="password" ng-model="password" type="password" required /></div> </form> </div> <div class="form_right"> <a class="submit" href="" ng-click="submitform()">submit</a> </div> <div class="clear"></div> </div> </div> <script type="text/javascript"> var app=angular.module("loginapp",["ngmessages"]); app.controller("loginctrl", function($scope){ $scope.username = ""; $scope.password = ""; $scope.submitform=function(){ }; }); </script> </body> </html> now have login page shows above, i'm trying validation ngmessages
- if have use
<a>outside of form submit instead of button, how should do? - how can make sure error messages displayed when username or password empty, , after user submit form.
- how prevent user resubmitting form
<a>?
to show error messages after form submit, add variable '$scope.submitted = true;'. in order prevent re-submit submit button can disabled. please refer following link detailed explanation. https://scotch.io/tutorials/angularjs-form-validation
hope helps.
Comments
Post a Comment