Checking if input value is not empty or default

Question

I'm look for an elegant way to check if input value is not empty and not default.

For example let's say we have input with value Username, this is a default value, and once the user clicks on this input field Username would be deleted so user could enter what he wants. Just to make it clear this is how it would look when the page is loaded:

<input type="text" class="defaultValue" value="Username" />

Now by default this field would never be empty, unless user would do something to make it empty, so just to make sure i need to check for both things. The way i would do this is very simple:

if($(".defaultValue").val().length == 0 || $(".defaultValue").val() == "Username")
   alert("Please enter your username");

So this works, but looks ugly as hell. And usually i need to deal with huge forms so my code gets really ugly and hard to manage because of this, any way to improve this?

Thanks.

@undefined Just took a look at documentation and it says Note: The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. And i need to support IE 9. — Linas
– Linas, Commented Mar 6, 2013 at 22:18
@undefined—placeholders aren't supported by all browsers. But yes, that's a better solution. — RobG
– RobG, Commented Mar 6, 2013 at 22:18
There are many plugins for placeholder attribute, one of them is this github.com/parndt/jquery-html5-placeholder-shim, it's only 3kb. — Ram
– Ram, Commented Mar 6, 2013 at 22:20

RobG · Accepted Answer · 2013-03-06 22:17:18Z

18

Try:

if (this.value == '' || this.value == this.defaultValue) {
  // value is empty or is default value
}

answered Mar 6, 2013 at 22:17

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Garry Over a year ago

So what is difference ? only removing 0 can make it pretty ?

Linas Over a year ago

Well this definitely looks better.

RobG Over a year ago

@Garray—removing the unnecessary jQuery cruft and using direct property access means it's not only way less code, but probably about 20 times faster.

Garry Over a year ago

@ RobG Well now i am agree with you as there was no reference in Answer that it makes code fast i raised the comment

Linas Over a year ago

I'm accepting this answer even thou i chose to use undefined provided jQuery plugin, but this is also a very good solution.

Amy · Accepted Answer · 2013-03-06 22:18:44Z

4

Try writing a helper function to do this check for you.

var isEmptyOrDefault = function(field, default) {
    var value = $(field).val();
    return (value.length === 0 || value === default);
};

So you can use it:

if (isEmptyOrDefault($('.defaultValue'), 'Username')) {
    alert("Please enter your username");
}

answered Mar 6, 2013 at 22:18

Amy

7,5262 gold badges22 silver badges31 bronze badges

3 Comments

idrumgood Over a year ago

In your example, you pass the field argument as a jQuery object, but then inside isEmptyOrDefault() you have $(field).val() which would result in $($('.defaultValue')).val() which is not going to work.

idrumgood Over a year ago

@undefined huh, so it does. Well, sweetamylase is lucky that jQuery is so forgiving :)

Amy Over a year ago

@idrumgood jQuery will always check if the variable passed to it is an instance of jQuery. The example is just for demonstrating that introducing a helper function could keep the rest of the code logic more manageable.

Collectives™ on Stack Overflow

Checking if input value is not empty or default

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related