Post
Ask Question

Client Side Validations In .NET Web Applications With JavaScript /jQuery

Now, we will learn how to perform validations at the client side with the help of JavaScript/jQuery.

The main advantage of this approach is given below.

  • We are able to improve the performance of our web application, since it runs in the browser itself and it is quick as well.

In this article, I will demonstrate

  1. How to validate alphanumeric entry in input textbox
    For this purpose, use isAlphaNumericContents(), which is mentioned below.

  2. How to validate decimal values entry in input textbox
    For this purpose, use CheckValidDecimalAmount (), which is mentioned below.

  3. How to validate email id entry in input textbox
    For this purpose, use validateUpdatedEmail (), which is mentioned below.

Now, let us see with the code snippets given below. 

  1. <div class="divSandipPatilContents"> <input type="text" id="trasanctionNumber" /> <input type="text" id="totalPaidAmount" /> <input type="text id=" patienEmailID " />  
  2.   
  3. <button ng-click="ValidateData(); ">Validate All Data</button>  
  4.   
  5. </div>  

Now, use the code given below in your controller.js. 

  1. $scope.ValidateData = function() {  
  2.     IsValid();  
  3. }  
  4.   
  5. function IsValid() {  
  6.     var flag = true;  
  7.     var errorMessages = [];  
  8.     var trasanctionNumber = angular.element("#trasanctionNumber").val();  
  9.     var amountPaid = angular.element("#totalPaidAmount").val();  
  10.     var updatedEmailID = angular.element("#patienEmailID").val();  
  11.     if (!isAlphaNumericContents(trasanctionNumber)) {  
  12.         errorMessages.push("Please Enter Alphanumeric Transaction Number.\n");  
  13.         flag = false;  
  14.     }  
  15.     if (!CheckValidDecimalAmount(amountPaid)) {  
  16.         errorMessages.push("Please Enter Valid Total Paid Amount.\n");  
  17.         flag = false;  
  18.     }  
  19.     if (!validateUpdatedEmail(updatedEmailID)) {  
  20.         errorMessages.push("Please Enter Patient's Valid Email ID.");  
  21.         flag = false;  
  22.     }  
  23.     $scope.txberrMsg = errorMessages;  
  24.     return flag;  
  25. }  
  26.   
  27. function isAlphaNumericContents(strContents) {  
  28.     var cde, i, l;  
  29.     for (i = 0, l = strContents.length; i < l; i++) {  
  30.         cde = strContents.charCodeAt(i);  
  31.         if (!(cde > 47 && cde < 58) && !(cde > 64 && cde < 91) && !(cde > 96 && cde < 123)) {  
  32.             return false;  
  33.         }  
  34.     }  
  35.     return true;  
  36. };  
  37.   
  38. function CheckValidDecimalAmount(amountPaid) {  
  39.     if (!(/^[-+]?\d*\.?\d*$/.test(amountPaid))) {  
  40.         return false;  
  41.     }  
  42.     return true;  
  43. }  
  44.   
  45. function validateUpdatedEmail(updatedEmailID) {  
  46.     var regexInfo = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
  47.     return regexInfo.test(updatedEmailID);  
  48. }   

The image given below demonstrates how all the above validations are being fired in the Browser.