JQuery Check if input is empty on page load

Question

Hey I have a login form that when you click on the input the label move up, after focus out it checks if there is text in the input and if have the label stays up if dont the label comes down.

My code is:

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    });
});

The problem is when I click on login and it gives an error like username does not exist I want to keep the username on the input but when I do it the label stays on top of the text on the input.
How can I check on load if have text or not on the input?

Images to help understand the situation:

enter image description here

JSFiddle: http://jsfiddle.net/16g7yhLf/

Cheers!

Arun P Johny · Accepted Answer · 2015-02-06 13:52:03Z

7

You can trigger the focusout event after registering the event handler so that the handler will get executed.

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    }).focusout();//trigger the focusout event manually
});

Demo: Fiddle

A shorter version can be

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        $(this).toggleClass('has-value', text_val !== "");
    }).focusout(); //trigger the focusout event manually
});

answered Feb 6, 2015 at 13:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Collectives™ on Stack Overflow

JQuery Check if input is empty on page load

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related