Technology Blog Freebies Web Development SEO CSS HTML5 Javascript Internet things and more
Max length input validation inline with javascript
<input type="text" class="form-control" id="txtProjectCreateProjectCode"
placeholder="Project Code" required oninput="if (this.value.length > 50) this.value = this.value.slice(0, 50);" name="CreateProject.Code" value="">Bootstrap 5 Logout confirmation for .net core
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Logout Confirmation</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Are you sure you want to sign out? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <form id="logoutForm" asp-action="logoff" asp-controller="Auth" class="navbar-right"> <a class="btn btn-primary" @* onclick="return alert('Are you sure do you want to sign out?')" *@ href="javascript:document.getElementById('logoutForm').submit()"><i class="mdi mdi-logout me-1"></i><span>Logout</span></a> </form> </div> </div> </div> </div>
<a href="javascript:void(0);" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal"> <i class="mdi mdi-logout me-1"></i> Logout </a>
OTP Countdown JavaScript Version 2 - Initial Page load countdown
<button id="resendOtp" class="btn mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border:0px solid #1f3d88; background:transparent; color:#1f3d88;"> <i class="fa-solid fa-rotate-right"></i> Resend OTP </button> <div id="countdown" style="display: block; text-align: center; font-size: 12px; color: #fdb827;"> Resend OTP in <span id="timer">120</span> seconds </div> <script> function startCountdown() { const resendButtonInit = document.getElementById("resendOtp"); resendButtonInit.disabled = true; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Hide the countdown when the timer reaches 0 const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "none"; resendButtonInit.disabled = false; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); } // Call startCountdown function when the page loads window.onload = startCountdown; var resendOtpBtn = document.getElementById("resendOtp"); resendOtpBtn.addEventListener('click',function(){ resendOtp(); }); function resendOtp() { // Get the value of the textPhoneNumber input field const phoneNumber = document.getElementById("textPhoneNumber").value; // Disable the "Resend OTP" button const resendButton = document.getElementById("resendOtp"); resendButton.disabled = true; // Show the countdown timer const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "block"; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Re-enable the button and hide the countdown when the timer reaches 0 resendButton.disabled = false; countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); // Create a JSON object with the MobileNo property const data = { MobileNo: phoneNumber }; // Send a POST request to the API endpoint fetch("https://localhost:7146/api/security/resend-otp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) .then(response => { if (response.ok) { // Handle success //alert("OTP resend request successful"); } else { // Handle errors alert("OTP resend request failed"); } }) .catch(error => { console.error("An error occurred:", error); }); } </script>
OTP Countdown Script Javascript
<button id="resendOtp" class="btn mt-0 mb-3 d-block w-100" onclick="resendOtp()" type="button" style="border: 0px solid #1f3d88; background: transparent; color: #1f3d88;">Resend OTP</button> <input class="form-control valid" id="textPhoneNumber" readonly="" type="text" data-val="true" data-val-regex="Not a valid phone number." data-val-regex-pattern="^(?:7|0)[0-9]{9,9}$" data-val-required="Phone number is Required." name="PhoneNumber" value="0717194022" aria-describedby="textPhoneNumber-error" aria-invalid="false"> <div id="countdown" style="display: block;">Resend OTP in <span id="timer">120</span> seconds</div> <script> function startCountdown() { let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Hide the countdown when the timer reaches 0 const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); } // Call startCountdown function when the page loads window.onload = startCountdown; function resendOtp() { // Get the value of the textPhoneNumber input field const phoneNumber = document.getElementById("textPhoneNumber").value; // Disable the "Resend OTP" button const resendButton = document.getElementById("resendOtp"); resendButton.disabled = true; // Show the countdown timer const countdownDiv = document.getElementById("countdown"); countdownDiv.style.display = "block"; let seconds = 120; // Function to update the countdown timer function updateTimer() { const timer = document.getElementById("timer"); timer.textContent = seconds; seconds--; if (seconds < 0) { // Re-enable the button and hide the countdown when the timer reaches 0 resendButton.disabled = false; countdownDiv.style.display = "none"; } else { // Continue updating the timer setTimeout(updateTimer, 1000); } } // Start the countdown updateTimer(); // Create a JSON object with the MobileNo property const data = { MobileNo: phoneNumber }; // Send a POST request to the API endpoint fetch("https://localhost:7146/api/security/resend-otp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) .then(response => { if (response.ok) { // Handle success console.log("OTP resend request successful"); // You can add further code here for a successful response } else { // Handle errors console.error("OTP resend request failed"); // You can add error handling code here } }) .catch(error => { console.error("An error occurred:", error); // Handle network errors here }); } </script>
Subscribe to:
Posts (Atom)