jquery - 使用JQuery在文本框内添加验证检查

当用户满足特定条件时，我正在尝试在文本框内添加验证（绿色复选标记）。我正在使用JQuery来完成此操作。
我使用Fontawesome图标尝试了以下代码，但无法正常工作：

$('#username').append('<i style="display:inline;color: #3a7d34;" class="icon-check-sign"></i>');

如果有人可以向我提出一些好主意，我将非常感激。

更新：

按照我的html代码段，尝试在文本框内放置一个复选框

            <tr>
                <td style="text-align: left">
                    @Html.LabelFor(m => m.Username, "Username")
                </td>
            </tr>
            <tr>
                <td style="padding-left: 5px">
                    @Html.UsernameFor(m => m.Username,
                        new
                        {
                            @class = "inputClass1 inputClass2",
                            style = "width:150px",
                            id = "username",
                            onkeyup = " return validateUsername() "

                        })
                    @Html.ValidationMessageFor(model => model.Username)

                </td>
            </tr>

谢谢，

WH

最佳答案

您不能在文本输入中附加图标，而应将其放置在文本输入旁边：

$(function() {
$('.test').append('<i style="display:inline;color: #3a7d34;">&#10004;</i>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input><span class="test"></span>

http://jsfiddle.net/fhff4w3u/1/