vijayabharathambooks/vb_book
vijayabharathambooks/vb_book
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

custom mobile validation : ps

Browse Source
This commit is contained in:
VE10-Sanjeev 2024-01-25 09:22:27 +05:30
parent 8e0d353c8e
commit 9e97663828
1 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/Views/notifications_form.php
View File

@ -85,7 +85,7 @@
</span> </span>
</div> --> </div> -->
<div id="mailFormDiv"> <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"> <div class="form-group row">
<label for="recipient" class="col-4 col-form-label" >Recipient Email<span class="text-danger"> *</span></label> <label for="recipient" class="col-4 col-form-label" >Recipient Email<span class="text-danger"> *</span></label>
<div class="col-7"> <div class="col-7">
@ -129,7 +129,7 @@
</form> </form>
</div> </div>
<div id="whatsappFormDiv"> <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"> <!-- <div class="form-group row">
<label for="group_id" class="col-4 col-form-label">Categories</label> <label for="group_id" class="col-4 col-form-label">Categories</label>
<div class="col-7"> <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> <label for="mobile" class="col-4 col-form-label">Mobile Number<span class="text-danger"> *</span></label>
<div class="col-7"> <div class="col-7">
<!-- <input type="number" placeholder="Mobile Number" class="form-control" id="mobile" name="mobile"> --> <!-- <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> </div>
</div> </div>
@ -282,7 +286,7 @@
}); });
</script> </script>
<script> <script>
document.getElementById('myForm').addEventListener('submit', function(event) { document.getElementById('myForm1').addEventListener('submit', function(event) {
var form = event.target; var form = event.target;
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
@ -295,6 +299,32 @@
$('#submitBtn').prop('disabled', true); $('#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>
<script> <script>
function validateEmail(email) { function validateEmail(email) {
@ -314,3 +344,28 @@
} }
} }
</script> </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>