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

refresh_fields();

function refresh_fields() {
  var groups = document.querySelectorAll('.required');
  var parent_form = groups[0].querySelector('input').form;

  for (var g = 0; g < groups.length; g++) {
    var form_submit = parent_form.querySelector('button');
    var group_label = groups[g].querySelector('label');

    form_submit.disabled = true;

    if (group_label && group_label.querySelector('req') == null) {
      group_label.insertAdjacentHTML('beforeend', '<req>*</req>');
    }

    if (parent_form.querySelectorAll('required').length < 1) {
      form_submit.removeAttribute('disabled');
    }

    var inputs = parent_form.querySelectorAll('input');

    for (var i = 0; i < inputs.length; i++) {

      if (inputs[i].value.length < 3) {
        form_submit.disabled = true;
        inputs[i].classList.add('required');
      }

      inputs[i].oninput = function() {

        refresh_fields();

        if (this.value.length < 3) {
          this.classList.add('required');
        } else {
          this.classList.remove('required');
        }
      };

    }
  }
}