dynamically validate after textbox unfocus

Question

I currently have a form, in which i want to gather information from a user, and place it into custom settings.

Right now i am getting validation after the save button is fired off, but i was wondering is there anyway to get validation after the textbox becomes unfocused.

Answer 1

You can perform validation one of several ways (all of which are basically the same).

First, you can choose to run normal JavaScript using the onblur attribute, like this:

<apex:inputField value="{!MySetting__c.Value__c}" onblur="validate(this)" />

Second, you can choose to run managed JavaScript using the onblur function, like this:

<!-- Requires round-trip to server! -->
<apex:inputField id="value" value="{!MySetting__c.Value__c}">
    <apex:actionSupport event="onblur" action="{!validate}" reRender="value" />
</apex:inputField>

Note that this method requires a round-trip to the server if you specify an action attribute, which may cause the form to lose focus.

Third, you can choose to bind to the onblur as you would in any normal JavaScript (given in jQuery for simplicity):

$("input[id$=value]").on("blur", function() { ... });

Answer 2

You can add an eventListner on the event blur to capture when the focus is off the field and throw an error if there's no value in it. Check out the jsfiddle example here

<input type="text" id="someinput">

var inputField = document.getElementById('someinput');
inputField.addEventListener('blur',function(){
    if(inputField.value=='' || inputField.value==null){
        alert('please enter some value');
    }
});