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
  }
}