如果条件在jquery中满足，则追加标签

Question

我有输入框txtRefreshInterval，它只允许整数。

<td><span class="sfFormlabel">Refresh Interval</span></td>
<td><input type="text"  id="txtRefreshInterval"/> </td>

我这样验证。

 $('#txtRefreshInterval').keydown(function() {
                    if (isNaN($('#txtRefreshInterval').val())) {
                        //$("#lblError").html("<br/>Please Enter Integer Value.");
                        return false;

                    }
                });

它运行正常。在html中没有任何lblEroor。当有且仅当输入框没有整数到代码时，我想追加lblError。 追加：

<label id='lblError'>

并显示消息。但我找不到正确的追加方式

<label>

之后

txtRefreshInterval。

感谢。

Answer 1

为什么不在加载时将lblError元素作为“display：none”存在，如果值不是数字，则显示错误消息（而不是javascript dom操作）

Answer 2

方法1

在html中定义label元素并直接向其插入错误文本。 你有这样的HTML：

<td><span class="sfFormlabel">Refresh Interval</span></td>
<td><input type="text"  id="txtRefreshInterval"/> </td>
<label id='lblError'></label>

在你的jquery代码中，你现在可以直接在label标签中插入html：

$("#lblError").html("<br/>Please Enter Integer Value.");

方法2

您可以使用jquery .after（）：

$('#txtRefreshInterval').after("<label id='lblError'>Please Enter Integer Value.</label>");

Answer 3

我更喜欢keyup

$('#txtRefreshInterval').keyup(function() {
                    if (isNaN($('#txtRefreshInterval').val())) {
                        $("#lblError").html("<br/>Please Enter Integer Value.")
                       .after($(this));
                        return false;

                    }
                });

DEMO

修改

$('#txtRefreshInterval').keyup(function() {
                    if (isNaN($('#txtRefreshInterval').val())) {
                        console.log("here");
                        $(this).after(
                        $("<span/>").html("<br/>Please Enter Integer Value.")
                        );
                        return false;

                    }
                });

DEMO

---

又一次更新在输入正确时隐藏错误消息

$('#txtRefreshInterval').keyup(function() {
                    if (isNaN($('#txtRefreshInterval').val())) {
                        console.log("here");
                        $(this).after(
                            $("<span/>",{id:'lblerr'}).html("<br/>Please Enter Integer Value.")
                        );
                        return false;
                    }
               if($("#lblerr"))
                  $("#lblerr").remove(); 
                });

http://jsfiddle.net/Tfym9/13/

Answer 4

$('#txtRefreshInterval').keydown(function() {
                    if (isNaN($('#txtRefreshInterval').val())) {
                         $(this).after('<label id='lblError'>Error</label>');
                        return false;

                    }
                });