From 9e976638285bc814132c9228d39abdf9164b76ab Mon Sep 17 00:00:00 2001
From: VE10-Sanjeev <sanjeev.p@venbainfotech.com>
Date: Thu, 25 Jan 2024 09:22:27 +0530
Subject: [PATCH] custom mobile validation : ps

---
 app/Views/notifications_form.php | 65 +++++++++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 5 deletions(-)

diff --git a/app/Views/notifications_form.php b/app/Views/notifications_form.php
index 911c5e6f..0abcd631 100644
--- a/app/Views/notifications_form.php
+++ b/app/Views/notifications_form.php
@@ -85,7 +85,7 @@
                     </span>
                 </div> -->
                 <div id="mailFormDiv">
-                    <form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "mail_custom_notifications"; ?>" id="myForm2">
+                    <form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "mail_custom_notifications"; ?>" id="myForm1">
                         <div class="form-group row">
                             <label for="recipient" class="col-4 col-form-label" >Recipient Email<span class="text-danger"> *</span></label>
                             <div class="col-7">
@@ -129,7 +129,7 @@
                     </form>
                 </div>
                 <div id="whatsappFormDiv">
-                    <form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "whatsapp_custom_notifications"; ?>">
+                    <form role="form" class="parsley-examples" method="POST" enctype="multipart/form-data" action="<?= base_url() . "whatsapp_custom_notifications"; ?>" id="myForm2">
                         <!-- <div class="form-group row">
                             <label for="group_id" class="col-4 col-form-label">Categories</label>
                             <div class="col-7">
@@ -154,7 +154,11 @@
                                 <label for="mobile" class="col-4 col-form-label">Mobile Number<span class="text-danger"> *</span></label>
                                 <div class="col-7">
                                     <!-- <input type="number" placeholder="Mobile Number" class="form-control" id="mobile" name="mobile"> -->
-                                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" data-toggle="input-mask" data-mask-format="0000000000">
+                                    <!-- <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" data-toggle="input-mask" data-mask-format="0000000000" <input type="text" class="form-control" id="cmobile" name="cmobile" value="<?= isset($customer['mobile_no']) ? $customer['mobile_no'] : '' ?>" placeholder="Mobile Number (Enter only numbers)" required maxlength="10" onkeypress="return restriction(event)" /> -->
+                                    <!-- <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" data-toggle="input-mask" data-mask-format="0000000000"> -->
+                                    <!-- Modified input with validation -->
+                                    <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"  maxlength="10" onkeypress="return restrictNonNumeric(event)">
+                                    <span id="mobileValidationMessage"></span>
                                 </div>
                             </div>
                         </div>
@@ -282,7 +286,7 @@
     });
 </script>
 <script>
-    document.getElementById('myForm').addEventListener('submit', function(event) {
+    document.getElementById('myForm1').addEventListener('submit', function(event) {
         var form = event.target;
         
         if (form.checkValidity() === false) {
@@ -295,6 +299,32 @@
             $('#submitBtn').prop('disabled', true);
         }
    });
+   document.getElementById('myForm2').addEventListener('submit', function(event) {
+        var form = event.target;
+
+        // Get the mobile input value
+        var mobileInput = document.getElementById('mobile');
+        var mobileValue = mobileInput.value;
+
+        // Check the validity of the mobile number
+        var isMobileValid = /^[0-9]{10}$/.test(mobileValue);
+        // alert(isMobileValid);
+        if (!isMobileValid) {
+            // alert(isMobileValid);
+            if (form.checkValidity() === false || !isMobileValid) {
+                // alert("if-if");
+                    form.reportValidity(); // Display validation error messages
+                    event.preventDefault(); // Prevent form submission if it's not valid
+                    $('#submitBtn').prop('disabled', false);
+            } else {
+                // alert("if-else");
+                $('#submitBtn').prop('disabled', true);
+            }
+        }else{
+            // alert("else");
+            $('#submitBtn').prop('disabled', true);
+        }
+   });
 </script>
 <script>
      function validateEmail(email) {
@@ -313,4 +343,29 @@
             validationMessage.style.color = "red";
         }
     }
-</script>
\ No newline at end of file
+</script>
+<script>
+    function restrictNonNumeric(event) {
+      var keyCode = event.which ? event.which : event.keyCode;
+      var isValid = (keyCode >= 48 && keyCode <= 57) || keyCode === 8; // Allow numeric input and backspace
+      if (!isValid) {
+        event.preventDefault();
+        return false;
+      }
+      return true;
+    }
+
+    document.getElementById('mobile').addEventListener('input', function() {
+      var mobileNumber = this.value;
+      var isValid = /^[0-9]{10}$/.test(mobileNumber);
+      var validationMessage = document.getElementById('mobileValidationMessage');
+
+      if (isValid) {
+        validationMessage.textContent = 'Valid mobile number';
+        validationMessage.style.color = "green";
+      } else {
+        validationMessage.textContent = 'Invalid mobile number';
+        validationMessage.style.color = "red";
+      }
+    });
+  </script>
\ No newline at end of file