How to disable form submit when inputs are empty in angularjs -
i have form , want disable form submit when input fields empty. want show error when user clicks on submit button input fields empty. don't want show error default.
<%@page contenttype="text/html" pageencoding="utf-8"%> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="${pagecontext.request.contextpath}/js/registratonvalidation.js"></script> <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> <script> angular.module('myapp', []).controller("numonlyregex", function ($scope) { $scope.numonlyregex = /^\d{1,6}$/; }); </script> <!--<script src="${pagecontext.request.contextpath}/numonlyregex.js"></script>--> <title>registration form</title> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-login"> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <h2 class="text-muted">registration form</h2> <!--onsubmit="return validate()"--> <div ng-app="myapp" ng-controller="numonlyregex"> <form name="myform" action="registrationservlet.do" method="post" novalidate > first name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-za-z]{3,20}/" ng-model="uname" placeholder="first name" required/> <span style="color:red" ng-show="myform.uname.$error.pattern">first name cannot less 3 letters no digits</span><br/> last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-za-]{3,20}/" required placeholder="last name"/> <span style="color:red" ng-show="myform.lname.$error.pattern">first name cannot less 3 letters no digits</span><br/> <p>password: <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="password"/> <span style="color:red" ng-show="myform.pwd.$error.minlength">password cannot less 3 letters</span><br/> confirm password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="confirm password"/><br/> <span style="color:red" ng-show="myform.pwd2.$error.minlength">password cannot less 3 letters</span><br/> gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>male <br/><br/> mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,9}$/" ng-model="mobile" required placeholder="mobile"/> <span style="color:red" ng-show="myform.mobile.$error.pattern">please enter valid mobile number</span><br/> email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\s+@\s+\.\s+/" ng-model="email" required placeholder="email"/> <span style="color:red" ng-show="myform.email.$error.pattern">invalid email address</span><br/> address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="address"></textarea> <span style="color:red" ng-show="myform.address.$error.require==true">address cannot empty</span><br/> street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="street"/> area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="area"/> city: <select name="city" class="form-control" ng-model="city" required> <option value="hyderabad">hyderabad</option> <option value="secunderabad">secunderabad</option> <option value="delhi">delhi</option> <option value="mumbai">mumbai</option> </select><br/> state: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="state"/> country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="country"/> pin:<input type="text" class="form-control input-sm" ng-pattern="numonlyregex" name="pin" ng-model="pin" required placeholder="pin"/> <span style="color:red" ng-show="myform.pin.$error.pattern">only six-digit number allowed</span> <input type="submit" class="form-control btn btn-success" value="submit" /> <!--ng-disabled="myform.$invalid"--> </form> </div> </div> </div> </div> </div> </div> </div> </body> </html>
<input type='submit' ng-disabled="!myform.$valid">
Comments
Post a Comment