Post
Ask Question
Anilananda Chakrabortty

Anilananda Chakrabortty

  • NA
  • 425
  • 75k

form validation with angularjs with bootstrap

Feb 11 2019 11:35 PM
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)