Code for Timer run on Website and Texbox validation only numeric are allowed.
Validation for Text Box , Only numeric are allowed,
------------------------------------------------------------------------
function validation_Id(event) {
var key = event.keyCode || event.which;
var keychar = String.fromCharCode(key);
var pattern = /^[0-9]+$/;
if (key == 8 || key == 9 || key == 13 || key == 27 || key == 46 || (key >= 96 && key <= 105) ||
(key >= 35 && key <= 40) || pattern.test(keychar) && !event.shiftKey) {
// Allow backspace, tab, enter, escape, delete, arrow keys, and numeric input
return true;
} else {
// Block other input and display an error message
if (keychar === "#" || keychar === "@" || keychar === "*" || keychar === "!" || keychar === "$" || keychar === "%" || keychar === "^" || keychar === "&" || keychar === "(" || keychar === ")") {
/* 'alert("Special characters #, @, !, $, %, ^, &, *, (, and ) are not allowed.");*/
return false;
} else {
/*'alert("Please enter only numbers.");*/
}
return false;
}
}
-------------------------------------------------------------------------------------
<tr>
<td>
<div>
<asp:Label ID="verificationlbl" runat="server" CssClass="linklabel" Visible="false">Verification Code</asp:Label>
</div>
</td>
</tr>
<tr>
<td>
<div><!---->
<asp:TextBox ID="txtVerification" TabIndex="4" MaxLength="6" onkeydown="return validation_Id(event);" runat="server" Visible="false" CssClass="logintext" placeholder="Verification Code" ToolTip="Verification Code" Style="width: 140px; height: 20px;" Columns="15" ></asp:TextBox>
</div>
</td>
</tr>
-------------------------------------------------------------------------------------
<tr>
<td >
<div>
<asp:Button ID="btnFetchOtp" TabIndex="2" runat="server" CssClass="loginbutton" ToolTip="Verify OTP" Text="Verify OTP" Style="width: 50px;background-color:#6cb0ef; border:none; color:#030004;font-size:16px;font-weight:300;" Visible="false"></asp:Button>
</div>
</td>
</tr>
---------------------------------------------------------------------------------------------------
on page load mention
updateTimer();
--------------------------------
var countDownDate = new Date().getTime() + (2.5 * 60 * 1000);
var timerInterval = setInterval(updateTimer, 1000); // Start the timer
function updateTimer() {
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance < 0) {
clearInterval(timerInterval);
document.getElementById("timer").innerHTML = "Sorry the time is Up… Please request for a New OTP.";
/* alert("Please request to Resend Otp");*/
document.getElementById("resend").style.display = "inline-block"; // show the Resend OTP button
document.getElementById("btnFetchOtp").style.display = "none"; // show the Resend OTP button
document.getElementById("LoginSuccessfull").style.display = "none"; // show the Resend OTP button
} else {
var minutes = Math.floor(distance / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var timerString = "";
if (minutes > 0) {
timerString += minutes + " minute" + (minutes > 1 ? "s" : "") + " ";
}
if (seconds > 0) {
timerString += (seconds < 10 && minutes > 0 ? "0" : "") + seconds + " second" + (seconds > 1 ? "s" : "");
}
document.getElementById("timer").innerHTML = timerString + " remaining";
}
}
function resendOTP() {
// Code to resend the OTP goes here
alert("OTP resent successfully!"); // Display a message to the user
document.getElementById("resend").style.display = "none"; // Hide the "Resend OTP" button again
countDownDate = new Date().getTime() + (2.5 * 60 * 1000); // Reset the countdown time to 2 minutes
clearInterval(timerInterval); // Stop the previous timer
timerInterval = setInterval(updateTimer, 1000); // Start a new timer
}
Comments
Post a Comment