html - Can't validate editable h2 tag in the jquery -

i want change , validate value of html's h2 tag. have placed in div. current scenario when press h2 tag, automatically opens text box , can edit/clear value of text box.

issue: when try empty text box value not generating error message @ run time. error message generates when click jsp file. here sample code.

<div class="modal-header">   <h2 class="tc_pageheader editablename" id="detailsheader"></h2> </div> 

in case, when id value empty must display error message h2 tag cannot empty. want achieve validation using jquery (v1.9).

since there isn't code go on, made mock of think you're trying do.

demo: http://jsfiddle.net/nnkrv/

code:

$(document).on('click', '#detailsheader', function() {     $(this).replacewith("<input type='text' id='edit' value='" + $(this).text() + "' />"); });  $(document).on('focusout', '#edit', function() {     var newtitle = this.value;     if (newtitle == '') {         alert("cant blank!");         return false;     }     else {         $(this).replacewith('<h2 class="tc_pageheader editablename" id="detailsheader">' + newtitle + '</h2>');     } }); 

this lets edit title of h2, displays error if there blank title.