How do I pass the `number_entered_by_user` in a Javascript through `onfocusout(number_entered_by_user)` event

Question

How do I pass the number_entered_by_user in a Javascript through onfocusout(number_entered_by_user) event?

Pretty much new with Javascript and DOM manipulation. Have searched on this site but unable to find an relevant answer.

I have a <input> tag as follows :

<input type="number" id="txt_qu_12" onkeydown="return checkKeycode(event);" class="elementid" placeholder="" min="" max="">

I am trying to change the validation of the <input> tag as follows :

<input type="number" id="txt_qu_12" onfocusout="myFunction(number_entered_by_user)" class="elementid" placeholder="" min="" max="">

where during onfocusout event the user input will be passed to myFunction() function for User Input Validation.

Where the myFunction(number_entered_by_user) is defined as :

<script>
<!--
function myFunction(event)  
{  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if((phoneno.value.match(phoneno_templete))  
        {  
      return true;  
        }  
      else  
        {  
        alert("Enter proper PHONE NUMBER");  
        return false;  
        }  
} 
// -->
</script>

My question is how do I pass the number_entered_by_user through onfocusout event to the function function myFunction(number_entered_by_user)

Any suggestion and pointers are welcome. Thanks in advance.

---

Update : 1

As per @randomguy04 counter question, I objective is :

• For correct User Input :

  //No action, simply continue
  

• For wrong User Input :

  Generate an Alert as :

  alert("Enter proper PHONE NUMBER");
  

Here is my script :

<script>
function myFunction(event)  
{  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if((phoneno.value.match(phoneno_templete))  
        {  
      return true;  
        }  
      else  
        {  
        alert("Enter proper PHONE NUMBER");  
        return false;  
        }  
} 
</script>

---

Update 2

Initial <input> tag :

<input type="number" id="txt_qu_12" onkeydown="return checkKeycode(event);" class="elementid" placeholder="" min="" max="">

Changed to :

• First try :

  <script>
  <!--
  function myFunction(event){  
    var phoneno = event.target.value;
    var phoneno_templete = /^\d{10}$/;  
    if(!phoneno.match(phoneno_templete)){
      alert("Enter proper PHONE NUMBER");
    }
  } 
  -->
  </script>
  <input type="number" id="txt_qu_12" class="elementid" placeholder="" min="" max="" onfocusout="myFunction(event)">
  

• Second try :

  <script>
  <!--
  function myFunction(event){  
    var phoneno = event.target.value;
    var phoneno_templete = /^\d{10}$/;  
    if(!phoneno.match(phoneno_templete)){
      alert("Enter proper PHONE NUMBER");
    }
  } 
  // -->
  </script>
  

But still when I tab out with a invalid input (11 digits) no Alert is shown as shown below :

@randomguy04 solution seems to be perfect but not sure where I am doing wrong. Any suggestions please?

Answer 1

You can access the input's value by using the event on the onfocusout function

First you call the function and pass the event variable in your html:

<input type="number" id="txt_qu_12" onfocusout="myFunction(event)"/>

And your function should now have access to the event.target, which is the element that triggered the event, in your case, it would be the input with id txt_qu_12

Now you have access to the input's value in your javascript like:

function myFunction(event){  
  var phoneno = event.target.value;
  var phoneno_templete = /^\d{10}$/;  
  if(!phoneno.match(phoneno_templete)){
    alert("Enter proper PHONE NUMBER"); //this will happen if the phone number is not 10 digits in length
  }
}