JQuery, если/другое заявление, чтобы изменить CSS по щелчку

Question

$('#submitbtn').on("click", function() { 
    $('.message-box').val(); 
    var message = $(".message-box").val(); 
    $('#visible-comment').html(message); 
    $('.message-box').hide(); 
    return false; 
}); 

Я хочу, чтобы приведенный выше код в, если/другое условие, что если значение .message коробки является пустая строка, чтобы изменить цвет границы .message коробки к красному.

Не могли бы вы помочь мне в правильном направлении?

Я пробовал следующее, что изменяет границу красным цветом, но не запускает остальную часть кода.

$('#submitbtn').on("click", function() { 

    if ($(".message-box").val("")) { 
    $(".message-box").css("border","2px solid red"); 
    } else { 

    $('.message-box').val(); 
    var message = $(".message-box").val(); 
    $('#visible-comment').html(message); 
    $('.message-box').hide(); 
    return false; 
    } 
}); 

образец здесь: https://jsfiddle.net/wf69c7uu/2/

Answer 1

Идея заключается в том, чтобы проверить на ваших условиях, а затем просто добавить или удалить класс на основе оценки выражения.

Here is a working demo

код будет выглядеть следующим образом:

$('#submitbtn').on("click", function() { 
    $('.message-box').val(); 
    var message = $(".message-box").val(); 
    if (message === '') { 
     $('.message-box').addClass("invalid"); 
    } 
    else { 
     $('.message-box').removeClass("invalid"); 
     $('#visible-comment').html(message); 
     $('.message-box').hide(); 
    } 
    return false; 
}); 

Или, возможно, вы можете проверить вход в «реальном времени», как типы пользователей, как так:

$('#submitbtn').on("click", function() { 
    $('.message-box').val(); 
    var message = $(".message-box").val(); 
    if (!$(".message-box").hasClass("invalid")) { 
     $('#visible-comment').html(message); 
     $('.message-box').hide(); 
    } 
    return false; 
}); 

$(".message-box").on("input propertychange", function() { 
    var $this = $(this); 
    if (!$this.hasClass("invalid") && $this.val() === '') { 
    $this.addClass("invalid"); 
    } 
    else if ($this.hasClass("invalid") && $this.val() !== '') { 
    $this.removeClass("invalid"); 
    } 
}); 

Answer 2

Немного изменил код, который вы опубликовали на jsfiddle:

• Добавлен блок if else.

• Добавил $('.message-box').css("border", "4px solid red");, чтобы установить цвет границы textarea, когда он пуст.

  $(function() { 
      $('#submitbtn').on("click", function() { 
       var message = $(".message-box").val(); 
       if (message == "") { 
        $('.message-box').css("border", "4px solid red"); 
       } 
       else { 
        $('#visible-comment').html(message); 
        $('.message-box').hide(); 
        return false; 
       } 
      }); 
  }); 
  

Answer 3

• Добавить функцию e.preventDefault так, что ваши действия POST не будет срабатывать.
• Добавить if/else, чтобы проверить, пусто ли ваше поле сообщения.

$('#submitbtn').on("click", function(e) { 
 
    \t e.preventDefault(); 
 
     $('.message-box').val(); 
 
     var message = $(".message-box").val(); 
 
     if(message == ""){ 
 
     \t $(".message-box").css("border","2px solid red"); 
 
     }else{ 
 
     \t $('#visible-comment').html(message); 
 
     \t $('.message-box').hide(); 
 
     } 
 
    });