CODEWITHSUNDEEP
jquery
Jony Kale
Jony Kale

Reputation: 979

Making jquery ignore the placeholder text while checking if input is a null or not?

<form action="index.php" method="POST" id="addcredits">
    <input type="text" id="name" placeholder="Username"><br /><br />
    <input type="text" id="amount" placeholder="credits amount"><br /><br />
    <input type="submit" id="submit">
</form>

$(document).ready(function() {
    $("#addcredits").submit(function(event) {
        event.preventDefault();
        var username = $("#name");
        var amount = $("#amount");
        var submit = $("#amount");
        var error = $("#error");

        if (username.val() != null && amount.val() != null) {
            console.log("hi");
        } else {

            error.html("One of the fields were empty..");
            error.fadeIn("fast");

            setTimeout(function() {
                error.fadeOut("fast");
            }, 5000);
        }

    });
});

username and amount fields are always not nulll, because of the placeholder text. Is there a way to make jquery ignore placeholder?

Upvotes: 2

Views: 4496

Answers (6)

Nahuel
Nahuel

Reputation: 93

Although most of your answers are correct, I think that @Jony Kale asked is another thing. He is always getting the placeholder value. To avoid checking placeholder value in an input html element, try this:

(element.val() != $(element).attr("placeholder")

Then, you can use it in a function that checks if the input is empty or not:

function isEmpty(element) {
    return ((element.val() != $(element).attr("placeholder")) && (element.val().length > 0));
}

Upvotes: 2

topless
topless

Reputation: 8221

Instead of comparing it with null try to compare if it is an empty string or not 

username.val().length;

or

username.val() != "";

Upvotes: 1

adeneo
adeneo

Reputation: 318212

val() always returns a string, so check for empty strings. jQuery has a delay() method for animations, so no need for timeouts, and if you're only use the selectors once, there's no point in caching them :

$(document).ready(function() {
    $("#addcredits").om('submit', function(event) {
        event.preventDefault();

        if ( $("#name").val().length && $("#amount").val().length ) {
            console.log("hi");
        } else {
            $("#error").html("One of the fields were empty..");
                       .fadeIn("fast");
                       .delay(5000)
                       .fadeOut("fast");
        }
    });
});

Upvotes: 4

Rohan Kumar
Rohan Kumar

Reputation: 40639

You should not check the value with null, here it will not be null it is blank here, so username.val() is enough to check. And for placeholder you can check it by using attr like,

username.val()!=username.attr('placeholder')

Full code

 if (username.val()  && username.val()!=username.attr('placeholder')
  && amount.val()  && amount.val()!=amount.attr('placeholder')) {
        console.log("hi");
 }

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

if (username.val().length!=0 && amount.val().length != 0) {
    console.log("hi");
} else {
    console.log("working");
}

Upvotes: 0

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- http://jsfiddle.net/adiioo7/5nkG3/1/

JS:-

$(document).ready(function () {
    $("#addcredits").submit(function (event) {
        event.preventDefault();
        var username = $("#name");
        var amount = $("#amount");
        var submit = $("#amount");
        var error = $("#error");

        if (username.val().length > 0 && amount.val().length > 0) {
            console.log("hi");
        } else {

            error.html("One of the fields were empty..");
            error.fadeIn("fast");

            setTimeout(function () {
                error.fadeOut("fast");
            }, 5000);
        }

    });
});

HTML:-

<form action="index.php" method="POST" id="addcredits">
    <input type="text" id="name" placeholder="Username">
    <br />
    <br />
    <input type="text" id="amount" placeholder="credits amount">
    <br />
    <br />
    <input type="submit" id="submit">
    <div id="error"></div>
</form>

Upvotes: 0

Related Questions