Add class if input is empty and remove it if not

久未见 提交于 2020-01-06 19:59:06

问题


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


回答1:


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.




回答2:


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");
    }

  });

});



回答3:


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)
    })
});



回答4:


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/



来源:https://stackoverflow.com/questions/35664356/add-class-if-input-is-empty-and-remove-it-if-not

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!