Question

I have an html form which uses jquery focus and blur in order to clear and restore some preset field text. However, the form is in a modal dialog which can be hidden and shown using jquery hide() and show(). However, when the form is hidden, it is throwing a javascript error:

an invalid form control with name = 'email' is not focusable

I’m assuming this is because the form is hidden and can’t be accessed. Is there a way to force a blur event? Or some way to resolve this error? Here’s my code:

$j('.dField').focus(function(){
    clearInput($j(this)[0]); //The [0] seems to be necessary to retrieve the element at the DOM object level
});
$j('.dField').blur(function(){
    restoreInput($j(this)[0]);
});

function clearInput(textField) {
    if (textField.value == textField.defaultValue) {
        textField.value = "";
     }
}

//Restores the default value
function restoreInput(textField){
    if (textField.value == ""){
        textField.value = textField.defaultValue;
    }
}

$j('#dFormBack').click(function(){
        $j('#dContentContainer').show();
        $j('#vehicle_form').hide();
    });

Answer 1

You can activate the function inside the blur event listener, instead of trying to initiate a blur event.

restoreInput($j(".dfield")[0]);

A side note, your first lines can be written more efficiently:

$j('.dField').focus(function(){
    clearInput(this);
}).blur(function(){
    restoreInput(this);
});

this in the event handler refers to the DOM element to which the event listener is attached. It’s unnecessary to wrap this inside a JQuery wrapper and get the DOM element again using [0].