3
Answers

form validation with angularjs with bootstrap

Anilananda Chakrabortty

Anilananda Chakrabortty
6y
614
1
Hy guys i have found one proble in my application which is related to angularjs.
 
I have two textbox , if i enter in first textbox the second textbox will be fill automatically.
which i done with simple javascript.
 
In second textbox i used angularjs validation.
 
All are required fill.
 
Once all the fields fill the form will be validate and button will get enable.
 
But i dnt want to enter in second textbox i will enter in first textbox only and it will fill the second textbox . since second textbox have value now so it should validate the form.
Im not getting ....
 
This the complete code just copy paste you will get to know whats the problem.
 
Fill only first textbox.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>AngularJS Validation</title>  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">  
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>  
  9. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
  10. <script>  
  11. // create angular app  
  12. var validationApp = angular.module('validationApp', []);  
  13. // create angular controller  
  14. validationApp.controller('mainController', function ($scope) {  
  15. });  
  16. function sync() {  
  17. var n1 = document.getElementById('txtname1');  
  18. var n2 = document.getElementById('txtname2');  
  19. n2.value = n1.value;  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. <div ng-app="validationApp" ng-controller="mainController">  
  25. <div class="container">  
  26. <div class="row">  
  27. <div class="col-sm-6">  
  28. <!-- FORM ============ -->  
  29. <form name="userForm" ng-submit="submitForm()" novalidate>  
  30. <label>Enter name</label>  
  31. <input type="text" name="name1" id="txtname1" ng-model="user.name1" class="form-control" onkeyup="sync()" required>  
  32. <br />  
  33. <!-- NAME -->  
  34. <div class="form-group" ng-class="{ 'has-error' : userForm.name2.$invalid && !userForm.name2.$pristine,'has-success' : userForm.name2.$valid && !userForm.name2.$pristine }">  
  35. <label>Name will be copy from the first textbox</label>  
  36. <input type="text" name="name2" class="form-control" ng-model="user.name2" required id="txtname2">  
  37. <p ng-show="userForm.name2.$invalid && !userForm.name2.$pristine" class="help-block">You name is required.</p>  
  38. </div>  
  39. <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>  
  40. </form>  
  41. </div>  
  42. </div>  
  43. <p>If we enter value in the first textbox then that value will be copy in the second textbox.<br/>That time form shuould valid and button should enable as well as in the second textbox green broder should come.(Angularjs Validation)</p>  
  44. </div>  
  45. </div>  
  46. </body>  
  47. </html>
If you have any solution please let me know....
Thank you
Answers (3)
Next Recommended Forum