Better way to validate the value of span

Question

All, I am a newbie for jquery, I found sometimes I need write some code for validate the element value. like below.

var selectedLayOutIdx=$("#spanSelectedLayout").html();
if (selectedLayOutIdx!=undefined && selectedLayOutIdx!="") {
    alert("The value is null, please check it.");
    return;
} else {
    //keep going.
}

I found this code looks like verbose, I believe there must be a better way to make code work more fun in jquery. So far, I just haven't found it.

Please help me . thanks.

score 3 · Answer 1 · answered Mar 05 '13 at 11:34

3

you could use jQuery.trim():

var selectedLayOutIdx=$.trim( $("#spanSelectedLayout").html() );
if( selectedLayOutIdx == "" ) {
  //its empty
}

OR

if( !$.trim($("#spanSelectedLayout").html()) ) {
     //its empty
}

answered Mar 05 '13 at 11:34

Sudhir Bastakoti

99,167
15
158
162

1

@Joe.wang "better" is a matter of taste. It's better if short is good but not necessarily if understandability is what you aim at. `.html()` does not return a boolean so to be able to understand what it does you will have to be familiar with the falsy values of JS and in this case they does indeed make the second vresion different from the first. The first will only test for the empty string but `$trim(.html())` will return null if the selection is empty but an empty string if the selection in non-empty and has no html so the latter will hide a bug when you mistype the selector – Rune FS Mar 05 '13 at 12:31
@RuneFS Why did I get the message `undefined`? say you have the code like `$(document).ready(function () { alert($('#ddd').html()); });`, I test it in firefox. the selector got nothing . `ddd` doesn't exist in page. thanks. – Joe.wang Mar 05 '13 at 15:22

varunvlalan · Answer 2 · 2013-03-05T11:50:02.387

1

You can use following code to check value of span.

var selectedLayOutIdx=$("#spanSelectedLayout").text();
if(selectedLayOutIdx == ""){
  alert("Value is null")
}else{
  // Your code
}

UPDATED(shorter version):

if($("#spanSelectedLayout").text()){
  // code if text present
}

edited Mar 05 '13 at 11:50

answered Mar 05 '13 at 11:38

varunvlalan

940
10
23

Hi, friend, I means I would like to find a shorter code. like Sudhir's answer. please review it .thanks. – Joe.wang Mar 05 '13 at 11:44

score 1 · Answer 3 · edited May 23 '17 at 12:21

1

var result=$("#spanSelectedLayout").html().replace(/^\s+|\s+$/g, '') 
if( result== "" ){

.
.
.

which is valid for all browsers .

.trim() wont work in some versions of IE.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 05 '13 at 11:42

Suresh Atta

120,458
37
198
307

wow...I know this is a good answer , But I have trouble to understand regular expression . – Joe.wang Mar 05 '13 at 11:58

score 1 · Accepted Answer · answered Mar 05 '13 at 12:47

Firstly you need to precisely define what the requirements are. In your code you test against undefined jQuerys implementation of html never returns undefined so there's no reason to test against that. However there might or might not be reason to test against null

<div id="spanSelectedLayout">content</div>

var txt = $("#spanSelectedLayout").html() //txt will be "content"

<div id="spanSelectedLayout">    </div>

var txt = $("#spanSelectedLayout").html() //txt will be return "    "

<div id="spanSelectedLayout">    </div>

var txt = $.trim($("#spanSelectedLayout").html()) //txt will be return ""

<div id="spanSelectedLayout">    </div>

var txt = $("#spnSelectedLayout").html() //txt will be null

The latter is most likely to occur due to miss-spelling a selector, Ie a bug so you probably should treat that differently than "" or an all whitespace string. but "" and all whitespace HTML is semantically the same so you should probably treat those values alike which might then leading to

var selectedLayOutIdx=$.trim($("#spanSelectedLayout").html()); if( selectedLayOutIdx == "" ) { //is empty }

However $.trim(null) returns "" and not null so that will still hide the bug and you will therefor have to decide between the more concise code or something like this

var selectedLayOutIdx=$("#spanSelectedLayout").html();
if(selectedLayOutIdx == null) { throw "Invalid selector" }

if(  && $.trim(selectedLayOutIdx) == "" ) {
   //is empty
}

Best answer! I have to be responsible for the reviewer of the future. — Joe.wang, Mar 05 '13 at 13:40

Better way to validate the value of span

4 Answers4