Add class if input is empty and remove it if not

Question

I would like to add a class if input is empty and remove it if it isn't. I initially had addClass(); so I tried using:

.removeClass().addClass();

But it doesn't seem to update the class on the click of the button.

HTML:

<input id="firstName" type="text" />
<input id="lastName" type="text" />
<a href="#" id="button">SEND</a>

jQuery:

var firstName = $("#firstName");
var lastName = $("#lastName");

$('#button').click(function () {
    if(firstName.val() == "" || lastName.val() == ""){
        firstName.removeClass("errorInput").addClass("errorInput");
        lastName.removeClass("errorInput").addClass("errorInput");
    }

if ($(":input").hasClass("errorInput")) {
        alert("false");
    } else {
        alert("true");
    }
});

JSFiddle

Yuck, it bothers me when the titles don't reflect the content. Title doesn't say anything about "on click" :( — Michael Fever
– Michael Fever, Commented Jul 17, 2018 at 19:26

Hamms · Accepted Answer · 2016-02-27 01:01:12Z

5

You're trying to toggle the class. There's a method for that!

Quoting from the linked doc:

The second version of .toggleClass() uses the second parameter for determining whether the class should be added or removed. If this parameter's value is true, then the class is added; if false, the class is removed. In essence, the statement:
$( "#foo" ).toggleClass( className, addOrRemove );
is equivalent to:
if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

Something along the lines of firstName.toggleClass("errorInput", firstName.val() === "") should work for your case.

edited Feb 27, 2016 at 1:01

answered Feb 27, 2016 at 0:57

Hamms

5,11724 silver badges30 bronze badges

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

7 Comments

Hamms Over a year ago

firstName.toggleClass("errorInput", firstName.val() === "")

user4756836 Over a year ago

toggle just toggles the class on button click regardless of the input being empty or nto

Hamms Over a year ago

Toggle can accept a conditional argument indicating whether to toggle the class on or off.

Barmar Over a year ago

@Hamms Put that in the answer

user4756836 Over a year ago

@Hamms woah... didn't know toggle class accepted another parameter. Thank you!!

|

The Process · Accepted Answer · 2018-11-08 03:54:19Z

4

You can set some class to the input fields, or select em like this:

var firstName = $("#firstName");
var lastName = $("#lastName");

$('#button').click(function () {

  $('input').each(function(){

    if($this.val().trim()){
      $(this).addClass("errorInput");
    }
    else{
      $(this).removeClass("errorInput");
    }

  });

});

edited Nov 8, 2018 at 3:54

answered Feb 27, 2016 at 1:08

The Process

5,9533 gold badges33 silver badges41 bronze badges

Comments

Eric Guan · Accepted Answer · 2016-02-27 01:07:43Z

2

Your code doesn't take into consideration the case where one input is empty and the other isn't.

https://jsfiddle.net/0tfenwto/2/

if(firstName.val() == "")
    firstName.addClass("errorInput");
else
    firstName.removeClass("errorInput")

if(lastName.val() == "")
    lastName.addClass("errorInput");
else
    lastName.removeClass("errorInput")

EDIT: Generic input length checker. https://jsfiddle.net/0tfenwto/3/

$('#button').click(function () {
    $('input').each(function(){
        var val = $(this).val();
        $(this).toggleClass("errorInput",val.length==0)
    })
});

edited Feb 27, 2016 at 1:07

answered Feb 27, 2016 at 1:00

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

3 Comments

user4756836 Over a year ago

I would rather avoid that many if blocks. I have many input fields and that is why my if statement has multiple checks on one line

Eric Guan Over a year ago

Avoiding code duplication is good, however misrepresenting error states is not good. Check my edit for a generic solution.

nnnnnn Over a year ago

@user4756836 - So you'll display your First Name field as being in an error state even though it isn't just to avoid an extra if/else? Fortunately there is a shorter way to code it, without the if/else, but even if there wasn't you really should write as much code as needed to avoid confusing the user.

Scott Marcus · Accepted Answer · 2016-02-27 00:59:46Z

0

You forgot to add an else to your if.

 if(){
    // add the class
 } else {
    // remove the class
 }

Here's an updated fiddle: https://jsfiddle.net/za7pkb74/1/

answered Feb 27, 2016 at 0:59

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Collectives™ on Stack Overflow

Add class if input is empty and remove it if not

4 Answers 4

7 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related