The easy and elegant way to make element toggle between two another classes

Question

<!--language:lang-html-->
<div class="form-group m-b-40 ">
    <input type="text" class="form-control" id="input1">
    <span class="bar"></span>
    <span class="error_form" id="bname_error_message"></span>
    <label for="input1">Regular Input</label>
</div>

In the above html I need to add "form-control-success" class to the input element and keep it true as long as it complies with the state if (pattern.test(bname) && bname !== '')

The same logic should also be applied to the parent element of input. But this time different class "has-success" should be added to the parent class and keep it untill it meets the same condition.

For other cases like else if(bname !== '') and (!pattern.test(bname)) the classes "form-control-success" and "has-success" that has been added to input and its parent respectively should be replaced with their opposite classes "form-control-warning" and "has-warning". This process is bind to "keyup" event. I wonder if there's a method or an elegant way that will reduce the lines of code and keep it simple.

In the clumsy way, the code looks like this:

     <!--language: lang-js-->
        $("#input1").keyup(function(){
            check_bname();
         });

        function check_bname() {
            var pattern = /^[a-zA-Z]*$/;
            var bname = $("#input1").val();
         if (pattern.test(bname) && bname !== '') 
         {             
          $("#bname_error_message").hide();
          $("#input1").removeClass("form-control-warning");
          $("#input1").parents(".form-group").removeClass("has-warning") 
          $("#input1").parents(".form-group").addClass("has-success")
          $("#input1").addClass("form-control-success"); 
         }  

        else if(bname === '') 
        {
          $("#bname_error_message").html("Should not be empty");
          $("#bname_error_message").show();
          $("#input1").removeClass("form-control-success"); 
          $("#input1").parents(".form-group").removeClass("has-success")
          $("#input1").addClass("form-control-warning");   
          $("#input1").parents(".form-group").addClass("has-warning")          
        } 

       else 
       {
        $("#bname_error_message").show();
        $("#bname_error_message").html("Should contain only Characters");
        $("#input1").removeClass("form-control-success"); 
        $("#input1").parents(".form-group").removeClass("has-success")
        $("#input1").addClass("form-control-warning");           
        $("#input1").parents(".form-group").addClass("has-warning")
       }
}

Answer 1

$('#input1').on('keyup', function(event) {
    check_bname(event.target.value);
});

function check_bname(bname) {
    var $bnameInput = $("#input1");
    var $bnameErrorMessage = $("#bname_error_message");

    var pattern = /^[a-zA-Z]*$/;

    if(bname && pattern.test(bname)) {
        $("#bname_error_message").hide();

        $bnameInput.removeClass("form-control-warning");
        $bnameInput.parents(".form-group").removeClass("has-warning");

        $bnameInput.addClass("form-control-success");
        $bnameInput.parents(".form-group").addClass("has-success");         
    }
    else {
        $bnameInput.removeClass("form-control-success"); 
        $bnameInput.parents(".form-group").removeClass("has-success");

        $bnameInput.addClass("form-control-warning");   
        $bnameInput.parents(".form-group").addClass("has-warning");

        if (!bname) {
            $bnameErrorMessage.text("Should not be empty");
        }
        else {
            $bnameErrorMessage.text("Should contain only Characters");
        }

        $bnameErrorMessage.show();     
    }
}

Answer 2

here is a version of your code with some more brevity to it and using more dry coding (less repetition), however i havent been able to try the code so it may contain a bug or two, you need to try it before you run, but i hope you get general idea:

<!--language:lang-jquery-->
$elemInput.keyup(function(){
  check_bname();
});

function check_bname() {
  var pattern = /^[a-zA-Z]*$/,
  bname = $elemInput.val(),
  $elemInput = $("#input1"),
  $elemError = $("#bname_error_message"),
  patternMatch = pattern.test(bname) && bname !== '';

  $elemError[patternMatch ? 'hide' : 'show']();
  $elemError.removeClass(patternMatch ? "form-control-warning" : "form-control-success")
  $elemInput.parents(".form-group").removeClass(patternMatch ? "has-warning" : "has-success") 
  $elemInput.addClass(patternMatch ? "form-control-success" : "form-control-warning"); 
  $elemInput.parents(".form-group").addClass(patternMatch ? "has-success" : "has-warning")
  
  if (!patternMatch) {
    $elemError.html(bname === '' ? "Should not be empty" : "Should contain only Characters");
  }
}

Answer 3

I think its quite good but I'd suggest some small changes:

• Group your else logic in the same block because they are duplicated except the line to set the html text.

• Use .parent() instead of .parents(".form-group") to get the input direct parent.

So it could look like this:

$("#input1").keyup(function(){
    check_bname();
});

function check_bname() {
    var pattern = /^[a-zA-Z]$/;
    var bname = $("#input1").val();

    if (pattern.test(bname) && bname !== '') {
        $("#bname_error_message").hide();
        $("#input1").removeClass("form-control-warning");
        $("#input1").parent().removeClass("has-warning");
        $("#input1").parent().addClass("has-success");
        $("#input1").addClass("form-control-success"); 
    } else {
        $("#bname_error_message").html(bname === ''? "Should not be empty" : "Should contain only Characters");
        $("#input1").removeClass("form-control-success");
        $("#input1").parent().removeClass("has-success");
        $("#input1").addClass("form-control-warning");
        $("#input1").parent().addClass("has-warning");
    }
}