JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<form>
<a href="#" id="username" data-type="text" data-pk="1" data-original-title="Enter username">test with unobtrusive</a> 
</form>

JavaScript

$.fn.editable.defaults.mode = 'inline';

$('#username').editable({
    type: 'text',
    pk: 1,
    name: 'username',
    title: 'Enter username'
});

$('#username').on('shown', function() {
    var $innerForm = $(this).data('editable').input.$input.closest('form');
    var $outerForm = $innerForm.parents('form').eq(0);
    $innerForm.data('validator', $outerForm.data('validator'));
});