code
i have made a code like this in Angular JS
<form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
<div class="form-group">
<label class="col-sm-2 control-label">username</label>
<div class="col-sm-10">
<input class="form-control" id="name" type="text" required ng-model='user.name' />
pass:{{form-control.$valid}}
</div>
</div>
<label for="minlength">4.max length=20</label>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="submit" />
</div>
</form>
how could i change this code ,to make the page do the follwing : the enterd username can only contain alphanumeric characters with a minimum length of 4 and the maximum length of 20 characters) The textbox border should be highlighted red ,and if the username is invalid ,it will be green .

Step by step
Solved in 2 steps









