Simple Required Fields

by Kevin Pliester

HTML

<form>

  <div class="form-group required">
    <label>Benutzername</label>
    <input type="text" class="" value="">
  </div>

  <div class="form-group required">
    <label>Passwort</label>
    <input type="password" class="" value="">
  </div>

  <button type="button">Anmelden</button>

  <p>
    <small>Felder die mit einem <req>*</req> markiert sind, sind Pflichtfelder.</small>
  </p>

</form>

SCSS

req {
  color: red;
}

.form-group {
  margin: 0 0 15px;
  display: block;
  width: 100%;
  clear: both;
  label {
    display: block;
  }
  input {
    border-color: #333;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
  }
  input.required {
    border-color: red;
  }
}

button {
  opacity: 1;
  padding: 5px;
  background: #333;
  color: #fff;
  border: 0px;
  cursor: pointer;
  margin: 0 0 15px;
}

button[disabled] {
  opacity: .25;
  background: #999;
  cursor: not-allowed;
}

JavaScript

(function($) {

  $(refresh_fields);

  function refresh_fields() {

    $('.required').each(function() {

      var self = $(this);
      var submit_button = $(this).parent().find('button');

      $(submit_button).prop('disabled', true);

      if ($(self).find('req').length < 1) {
        $(self).find('label').append('<req>*</req>');
      }

      if ($(self).find('.required').length < 1) {
        $(submit_button).prop('disabled', false);
      }

      $(self).find('input').each(function() {

        if (this.value.length < 3) {
          $(this).addClass('required');
          $(submit_button).prop('disabled', true);
        }

        $(this).on('input', function() {

          $(refresh_fields);

          if (this.value.length < 3) {
            $(this).addClass('required');
          } else {
            $(this).removeClass('required');
          }
        });
      });
    });
  }

})(jQuery)