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?

Carlos Valencia · Accepted Answer · 2017-12-28T16:15:28.927

2

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

edited Dec 28 '17 at 16:15

answered Dec 28 '17 at 15:12

Carlos Valencia

6,499
2
29
44

Thanks for the quick response. Should it be `onfocusout="myFunction(event)"` or `onfocusout="return myFunction(event)"`? If so how do I return after performing `//... do the validations you need` ? – undetected Selenium Dec 28 '17 at 15:18
`onfocusout="myFunction(event)` works well, and the Javascript function can do and return anything, but there is no function that will do anything with the returned value. This is where you have to implement your logic, what do you want to do when the input is valid? what do you want to do when it's not? maybe put a red border on it? this behavior is yours to make and implement within `myfunction` your Javascript and HTML don't "just know" what to do when you return `true` or `false`, you are the one who has to decide what to do. Hope this clears it up a bit – Carlos Valencia Dec 28 '17 at 15:43
Updated the question with the points you have asked with my objective and final script. Can you please have a look at it? – undetected Selenium Dec 28 '17 at 16:07
as I said, there is no need to return anything, see the updated code in the answer, it will alert if your regex condition is not met, otherwise it will just do nothing – Carlos Valencia Dec 28 '17 at 16:16
Thanks a lot for your valuable time. Added an update with my final change, script and execution result. Still no luck. Can you please have a look at it once more? – undetected Selenium Dec 28 '17 at 16:49

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

Update : 1

Update 2

1 Answers1