JavaScript for Verifying Phone Numbers

Question

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work.

I have a button that looks like this:

Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is not the issue where I am stuck.

When the button is clicked, it triggers a JavaScript code like this:


$(document).on("click", "#create_account", function(evt)
{
    /* This code is not mine; I found it in an online tutorial and it works on JSFiddle, so I know this isn't the problem */
    function phonenumber(inputtxt)
    {
        var phoneno = /^\d{10}$/;
        if(inputtxt.value.match(phoneno))
        {
            return true;
        }
        else
        {
            alert("Not a valid Phone Number");
            return false;
        }
    }
});

I suspect the reason why this isn't working is because I am not calling that specific function to run. However, after some tests, I do know that it is hitting the onclick aspect of it.

My goal is to validate the phone number to be 10 digits (for now). I have set the input type as text with the ID "input_phone". I plan to modify this further for more than just 10 numbers later on, but I am currently struggling to execute this function and trigger that alert message.

Thank you in advance for any tips or help!

javascript html css

Answer 1

Answer №1

One reason it's not working is because you're defining a function within the click event instead of calling it. To fix this, move the function body outside of the event callback and simply call the function from inside.

Here is an example code snippet to demonstrate the correct approach:

$(document).on("click", "#create_account", function(evt)
{
    phonenumber($('#create_account').val()); // enter input value here
})

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if(inputtxt.value.match(phoneno))
  {
      return true;
  }
  else
  {
     alert("Not a valid Phone Number");
     return false;
  }
}

$(document).on("click", "#create_account", function(evt) {
  console.log(phonenumber($('#in').val()) ? 'Valid' : 'Invalid');
})

function phonenumber(inputtxt) {

  var phoneno = /^\d{10}$/;
  if (inputtxt.match(phoneno)) {
    return true;
  } else {
    alert("Not a valid Phone Number");
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="in" />
<button id="create_account">Create Account</button>

Plain JS Version

document.getElementById('create_account').addEventListener('click', function(evt) {
  console.log(phonenumber(document.getElementById('in').value) ? 'Valid' : 'Invalid');
})


function phonenumber(inputtxt) {

  var phoneno = /^\d{10}$/;
  if (inputtxt.match(phoneno)) {
    return true;
  } else {
    alert("Not a valid Phone Number");
    return false;
  }
}

<input type="text" id="in" />
<button id="create_account">Create Account</button>

Answer 2

One reason it's not working is because you're defining a function within the click event instead of calling it. To fix this, move the function body outside of the event callback and simply call the function from inside.

Here is an example code snippet to demonstrate the correct approach:

$(document).on("click", "#create_account", function(evt)
{
    phonenumber($('#create_account').val()); // enter input value here
})

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if(inputtxt.value.match(phoneno))
  {
      return true;
  }
  else
  {
     alert("Not a valid Phone Number");
     return false;
  }
}

$(document).on("click", "#create_account", function(evt) {
  console.log(phonenumber($('#in').val()) ? 'Valid' : 'Invalid');
})

function phonenumber(inputtxt) {

  var phoneno = /^\d{10}$/;
  if (inputtxt.match(phoneno)) {
    return true;
  } else {
    alert("Not a valid Phone Number");
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="in" />
<button id="create_account">Create Account</button>

Plain JS Version

document.getElementById('create_account').addEventListener('click', function(evt) {
  console.log(phonenumber(document.getElementById('in').value) ? 'Valid' : 'Invalid');
})


function phonenumber(inputtxt) {

  var phoneno = /^\d{10}$/;
  if (inputtxt.match(phoneno)) {
    return true;
  } else {
    alert("Not a valid Phone Number");
    return false;
  }
}

<input type="text" id="in" />
<button id="create_account">Create Account</button>

JavaScript for Verifying Phone Numbers

Answer №1

Plain JS Version

Similar questions

Challenges encountered while using Selenium WebDriver to upload images

Retrieving Information from Website Components in JavaFX Web View

Arranging an Array of Objects in JavaScript by dual criteria

Issue with Laravel ReactJs: My changes in the ReactJs file are not being reflected on the website

Encountered an import error when using "npm run build", but it runs successfully with "npm start"

The functionality of XPATH does not seem to be properly executed with JQuery

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

Master the art of using Insertion Sort in javascript with the help of Khan Academy

Trouble with custom font updates in Hugo using Blogdown

Leaving a message on someone else's Facebook wall by sharing a link to a website

Updating the User Interface in ReactJS based on changes in the state

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

Error encountered when uploading mp3 file to S3 node due to size limitation

Tutorial on creating a loop for a function based on a specific condition

Utilizing jquery and ajax to submit a form seamlessly without the need to refresh the web page

Managing ajax requests, failing to retrieve information

Utilize the power of Nuxt and Vue 3 to create sortable columns in a table, with the ability to only change the icons on the sorted column

Resolving Route Problems in Node.js with Express

Verify the security of form authentication on the client-side

Looking for assistance with PHP if statement and troubleshooting iFrame issues