CODEWITHSUNDEEP
jqueryhtml
4b0
4b0

Reputation: 22321

Append label if condition meet in jquery

I have input box txtRefreshInterval which allow only integer.

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

I validate it like this.

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

                    }
                });

It works fine.In html there is not any lblEroor.I want to append lblError if and only if input box have not integer through code. append:

<label id='lblError'>

and display message.But I am not find correct way to append

<label>

after

txtRefreshInterval.

Thanks.

Upvotes: 0

Views: 4763

Answers (4)

John x
John x

Reputation: 4031

i would prefer keyup

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

                    }
                });

DEMO

EDIT:

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

                    }
                });

DEMO

yet another update hide the error message when the input is correct

$('#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/

Upvotes: 0

Ninja
Ninja

Reputation: 5152

Method 1

Define the label element in html itself and insert error text to it directly. Have your html like this:

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

In your jquery code, you can now directly insert html in label tag:

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

Method 2

You can use jquery .after() for this:

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

Upvotes: 1

eiu165
eiu165

Reputation: 6271

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

                    }
                });

Upvotes: 0

Michael Welburn
Michael Welburn

Reputation: 1075

Why not just have the lblError element exist on load as "display: none" and if the value is not a number, you show the error message (instead of the javascript dom manipulation)

Upvotes: 1

Related Questions