jQuery addClass example

Change class name on click in jQuery

by Issaki1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="additional-methods.js"></script>
<form id="dataForm" method="post" action="#">

  <div class="form-group">
    <label class="control-label" for="commentInput">Comments</label>
    <textarea class="commentInput" id="commentInput" name="commentInput" rows="5"></textarea>
  </div>

  <div class="form-group">
    <label class="control-label" for="accountNameInput">Account name</label>
    <input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
  </div>
  <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

</form>

JavaScript

$(document).ready(function() {
  $.validator.setDefaults({
    highlight: function(element, errorClass, validClass) {
      if (element.type === "radio") {
        this.findByName(element.name).addClass(errorClass).removeClass(validClass);
      } else {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error has-feedback');
        $(element).closest('.form-group').find('span.glyphicon').remove();
        $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
      }
    },
    unhighlight: function(element, errorClass, validClass) {
      if (element.type === "radio") {
        this.findByName(element.name).removeClass(errorClass).addClass(validClass);
      } else {
        $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
        $(element).closest('.form-group').find('span.glyphicon').remove();
        $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
      }
    }
  });

  $('#dataForm').validate({
    rules: {
      accountNameInput: {
        required: true
      },
      commentInput: {
        required: false
      }
    },
    submitHandler: function(form) {
      alert('success');
    }
  });
});