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
- How to validate alphanumeric entry in input textbox
For this purpose, use isAlphaNumericContents(), which is mentioned below.
- How to validate decimal values entry in input textbox
For this purpose, use CheckValidDecimalAmount (), which is mentioned below.
- 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.
- <div class="divSandipPatilContents"> <input type="text" id="trasanctionNumber" /> <input type="text" id="totalPaidAmount" /> <input type="text id=" patienEmailID " />
-
- <button ng-click="ValidateData(); ">Validate All Data</button>
-
- </div>
Now, use the code given below in your controller.js.
- $scope.ValidateData = function() {
- IsValid();
- }
-
- function IsValid() {
- var flag = true;
- var errorMessages = [];
- var trasanctionNumber = angular.element("#trasanctionNumber").val();
- var amountPaid = angular.element("#totalPaidAmount").val();
- var updatedEmailID = angular.element("#patienEmailID").val();
- if (!isAlphaNumericContents(trasanctionNumber)) {
- errorMessages.push("Please Enter Alphanumeric Transaction Number.\n");
- flag = false;
- }
- if (!CheckValidDecimalAmount(amountPaid)) {
- errorMessages.push("Please Enter Valid Total Paid Amount.\n");
- flag = false;
- }
- if (!validateUpdatedEmail(updatedEmailID)) {
- errorMessages.push("Please Enter Patient's Valid Email ID.");
- flag = false;
- }
- $scope.txberrMsg = errorMessages;
- return flag;
- }
-
- function isAlphaNumericContents(strContents) {
- var cde, i, l;
- for (i = 0, l = strContents.length; i < l; i++) {
- cde = strContents.charCodeAt(i);
- if (!(cde > 47 && cde < 58) && !(cde > 64 && cde < 91) && !(cde > 96 && cde < 123)) {
- return false;
- }
- }
- return true;
- };
-
- function CheckValidDecimalAmount(amountPaid) {
- if (!(/^[-+]?\d*\.?\d*$/.test(amountPaid))) {
- return false;
- }
- return true;
- }
-
- function validateUpdatedEmail(updatedEmailID) {
- 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,}))$/;
- return regexInfo.test(updatedEmailID);
- }
The image given below demonstrates how all the above validations are being fired in the Browser.