Post
Ask Question

Required Validation in JavaScript AngularJS

Html File
  1. <div class="form-group" ng-show="edit5" ng-hide="false">  
  2.     <label class="col-sm-2 control-label">  
  3. First Name:</label>  
  4.     <div class="col-sm-2">  
  5.         <input type="text" id="fname" name="fName" ng-model="fName" placeholder="First Name" class="form-control" />  
  6.     </div>  
  7. </div>  
  8. <div class="form-group" ng-show="edit5" ng-hide="false">  
  9.     <label class="col-sm-2 control-label">  
  10. Last Name:</label>  
  11.     <div class="col-sm-2">  
  12.         <input type="text" id="lname" name="lname" ng-model="lName" placeholder="Last Name" class="form-control" />  
  13.     </div>  
  14. </div>  
  15. <div class="form-group" ng-show="edit5" ng-hide="false">  
  16.     <label class="col-sm-2 control-label">  
  17. Phone Number:</label>  
  18.     <div class="col-sm-2">  
  19.         <input type="text" id="phone" name="phone" ng-model="phone" placeholder="Phone Number" class="form-control" />  
  20.     </div>  
  21. </div>  
  22. <div class="form-group" ng-show="edit7" ng-hide="false">  
  23.     <label class="col-sm-2 control-label" >  
  24. Image:</label>  
  25.     <div class="col-sm-2">  
  26.         <input class="file" type="file" file-model="myFile" id="myFile"/>  
  27.         <button type="button" ng-click="uploadFile()" class="btn btn-primary">  
  28.             <span class="glyphicon glyphicon-upload"> Upload File</span>  
  29.         </button>  
  30.         <br />  
  31.     </div>  
  32. </div>  
  33. <div class="col-sm-10" ng-show="remove" ng-hide="true" style="margin-left:150px">  
  34.     <img id="getimg" height="100px" width="100px" class="img-thumbnail col-xs-6 col-md-3" alt="Responsive image"/>  
  35.     <button type="button" class="btn btn-info" id="Remov" ng-click="removefile()" ng-show="remove1" ng-hide="false">  
  36.         <span  
  37. class="glyphicon glyphicon-remove"></span>Remove  
  38.     </button>  
  39. </div>  
  40. <div class="form-group" style="margin-left:300px">  
  41.     <input type="text" id="hid" name="hid" ng-model="hid" ng-hide="true" />  
  42. </div>  
  43. <button class="btn btn-primary" ng-click="SaveData()">  
  44.     <span class="glyphicon glyphicon-save"></span>Save Data  
  45.   
  46. </button>  
  47. <button id="cbtn" class="btn btn-danger" ng-click="cancel()">  
  48.     <span class="glyphicon glyphicon-cancel"></span>Cancel  
  49.   
  50. </button>undefined</div>  
JS File
  1. $scope.SaveData = function()   
  2. {  
  3.     strErrorMsg = "";  
  4.     var a = $("#hid").val();  
  5.     notEmpty(document.getElementById('fname'), '-Enter your First Name.');  
  6.     notEmpty(document.getElementById('lname'), '-Enter your Last Name.');  
  7.     notEmpty(document.getElementById('phone'), '-Enter your Phone Number.');  
  8.     ValidMno(document.getElementById('phone'), '-Enter Valid Phone Number.');  
  9.     if (strErrorMsg == '')   
  10.     {  
  11.         $.ajax({  
  12.             type: "POST",  
  13.             url: "User_Form.aspx/Data_Save",  
  14.             contentType: "application/json; charset=utf-8",  
  15.             data: JSON.stringify({  
  16.                 id: $scope.id,  
  17.                 firstName: $scope.fName,  
  18.                 lastName: $scope.lName,  
  19.                 phone: $scope.phone,  
  20.                 photo: $scope.hid = a  
  21.             }),  
  22.             success: function(data) {  
  23.                 $scope.LoadData();  
  24.                 $("#hide").text('');  
  25.                 $scope.$apply();  
  26.             }  
  27.         });  
  28.         $scope.edit3 = true;  
  29.         $scope.edit2 = false;  
  30.     }  
  31.     if (strErrorMsg != '')   
  32.     {  
  33.         $window.alert(' \n' + strErrorMsg);  
  34.     }  
  35.     else   
  36.     {  
  37.     }  
  38. };  
  39. function notEmpty(elem, helperMsg)  
  40. {  
  41.     if (elem.value == "")   
  42.     {  
  43.         strErrorMsg = strErrorMsg + helperMsg + "\n";  
  44.     }  
  45. }  
  46. function ValidMno(elem, helperMsg)  
  47. {  
  48.     if (elem.value !== "")   
  49.     {  
  50.         var phone = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;  
  51.         if (!(elem.value.match(phone)))  
  52.         {  
  53.             strErrorMsg = strErrorMsg + '' + helperMsg + "\n";  
  54.         }  
  55.     }  
  56. }