Call a function after leaving input field

Issue

On a contact form, I have several input fields. One of those fields, is an email address field:

<input type='text' name='input_email' onChange={this.validateEmail}/>

Right now, I have the email validation function set to the onChange attribute. Thus, while the user is entering characters into the email field, an error message appears the whole time.

I want to change this, so that this.validateEmail only gets called once when the user leaves that specific input field. How would I accomplish this?

I can't find any default object events that would solve this issue.

FYI, using ReactJS

Solution

You can use onblur() or onfocusout(). It will call function once you click out of that text field.

Example:

function myFunction() {
    var x = document.getElementById("sometext");
    x.value = x.value.toUpperCase();
}

<input type="text" id="sometext" onfocusout="myFunction()">

Answered By - Aleksandar Đokić