OTP Verification through Mobile Number using Javascript

Verifying a One-Time Password (dru) typically involves comparing the OTP a user provides to the one generated by a trusted system or service. OTPs are commonly used for authentication and security purposes. Here’s a general outline of how to verify an OTP.

User Input

The user provides an OTP through an application.

Generate an OTP

On the server side, an OTP is generated by a third-party api by clicking the get OTP button.

Validation

The below steps are to validate the OTP.

1. Put the OTP in the OTP field with the validate OTP button.

2. If validate-otp-by-number api returns success, then display the matched message and add a class isValidateOtp else, throw an error.

$('.validate-otp').once().click(function (e) {
  var mobile_element = $('.mobile-number);
  var mobileNumber = mobile_element.val();
  var otp = $('.otp').val();
  var data = [otp, mobileNumber];
  if (/^\d{5,}$/.test(mobile_element.val())) {
    $('.error-otp).empty();
    $.ajax({
      type: 'POST',
      url: '/validate-otp-by-number/' + data, 
      dataType: "json",
      cache: false,
      success: function (result) {
        if(result.status == 'success') {
          $('.otp').addClass('isValidateOtp');
    $('.otp').append('<span class="green">'+result.message+'</span>');
        }else{
$('.otp').append('<span class="error">'+result.message+'</span>');
    });
  }
});

3. If the user changes the number, then remove the isValidateOtp class 

    jQuery('.mobile-number').change(function(){
      $('.otp').removeClass('isValidateOtp');
      })

Conclusion

The above article is used for the OTP validation and to prevent access to the other accounts.

Thanks for reading this article, Hope, you will find this helpful. Please comment below if you have any questions regarding the same.