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, Jul 17 '18 at 19:26

Hamms · Accepted Answer · 2016-02-27T01:01:12.847

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 '16 at 01:01

answered Feb 27 '16 at 00:57

Hamms

5,016
21
28

`firstName.toggleClass("errorInput", firstName.val() === "")` – Hamms Feb 27 '16 at 00:58
toggle just toggles the class on button click regardless of the input being empty or nto – user4756836 Feb 27 '16 at 00:58
Toggle can accept a conditional argument indicating whether to toggle the class on or off. – Hamms Feb 27 '16 at 01:00
@Hamms Put that in the answer – Barmar Feb 27 '16 at 01:00
@Hamms woah... didn't know toggle class accepted another parameter. Thank you!! – user4756836 Feb 27 '16 at 01:04
Toggling the class is the wrong thing to do for validation purposes. The class should be added/removed based on validation rules. – Scott Marcus Feb 28 '16 at 00:58
That's exactly what it's doing. – Hamms Feb 29 '16 at 17:51

The Process · Answer 2 · 2018-11-08T03:54:19.767

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 08 '18 at 03:54

answered Feb 27 '16 at 01:08

The Process

5,913
3
30
41

Eric Guan · Answer 3 · 2016-02-27T01:07:43.790

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 '16 at 01:07

answered Feb 27 '16 at 01:00

Eric Guan

15,474
8
50
61

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 – user4756836 Feb 27 '16 at 01:01
Avoiding code duplication is good, however misrepresenting error states is not good. Check my edit for a generic solution. – Eric Guan Feb 27 '16 at 01:06
@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. – nnnnnn Feb 27 '16 at 01:07

score 0 · Answer 4 · answered Feb 27 '16 at 00:59

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 '16 at 00:59

Scott Marcus

64,069
6
49
71

Add class if input is empty and remove it if not

4 Answers4

Linked