Validation input min-max words

Question

var validateForm = (function() {
  var options = {};
  var classError = 'error';

  var showFieldValidation = function(input, inputIsValid) {
    if (!inputIsValid) {
      if (!input.parentNode.className || input.parentNode.className.indexOf(options.classError) == -1) {
        input.parentNode.className += ' ' + options.classError

      }
    } else {
      var regError = new RegExp('(\\s|^)' + options.classError + '(\\s|$)');
      input.parentNode.className = input.parentNode.className.replace(regError, '');

    }
  };

  var testInputText = function(input) {
    var fieldHasError = false;
    var mailReg = new RegExp('^[0-9a-zA-Z_.-]', 'gi');

    if (!mailReg.test(input.value)) {
      showFieldValidation(input, false);
      return false;
    } else {
      showFieldValidation(input, true);
      return true;
    }
  };;

  var prepareElements = function() {
    var elements = options.form.querySelectorAll('input[required]');

    [].forEach.call(elements, function(element) {
      element.removeAttribute('required');
      element.className += ' required';

      if (element.nodeName.toUpperCase() == 'INPUT') {
        var type = element.type.toUpperCase();

        if (type == 'TEXT') {
          element.addEventListener('keyup', function() {
            testInputText(element)
          });
          element.addEventListener('blur', function() {
            testInputText(element)
          });
        }

      }

    });
  };
  var formSubmit = function() {
    options.form.addEventListener('submit', function(e) {
      e.preventDefault();

      var validated = true;

      //pobieramy wszystkie pola, którym wcześniej ustawiliśmy klasę .required
      var elements = options.form.querySelectorAll('.required');

      //podobne działanie już robiliśmy przy przygotowywaniu pól
      [].forEach.call(elements, function(element) {
        if (element.nodeName.toUpperCase() == 'INPUT') {
          var type = element.type.toUpperCase();

          if (type == 'TEXT') {
            if (!testInputText(element)) validated = false;
          }

        }
      });

      if (validated) {
        this.submit();
      } else {
        return false;
      }
    });
  };

  var init = function(_options) {
    //do naszego modulu bedziemy przekazywac opcje
    options = {
      form: _options.form || null,
      classError: _options.classError || 'error'

    }
    if (options.form == null || options.form == undefined || options.form.length == 0) {
      console.warn('validateForm: bad form');
      return false;
    }
    prepareElements();
    formSubmit();
  };

  return {
    init: init
  }
})();

document.addEventListener("DOMContentLoaded", function() {
  var form = document.querySelector('.form');
  validateForm.init({
    form: form
  })
});

input[type=text].as_tags_in_l67:focus {
  outline-style: none;
}
.form .error input[type=text] {
  color: #DB083E;
  border-color: #DB083E;
  box-shadow: 0 0 2px 2px red;
}

<form class="form">
  <div class="ask_con_area67">

    <div id="til_bo_x43">
      <label class="til_l67">Title</label>
      <input class="til_l67_text" type="text" autocomplete="off" required/>
    </div>

  </div>
</form>

Hello, I have one question, how I can change my code to show next to input some text e.g. 'should add min 5 characters'? and how add min-length as 5 characters in validation and max-length as 100 characters?

Answer 1

Note, value at attribute selector at css requires enclosure within quotes.

input[type=text]

is not a valid attribute selector at css. Replace with

input[type="text"]

You can use html5 pattern attribute with RegExp ^[0-9a-zA-Z_.-]{5,100} at <input type="text"> element, <label> element with for attribute value set to id of <input> element to display

'should add min 5 characters'

at css :after pseudo element content using :invalid, :valid pseudo classes.

Substitute for minlength, maxlength attributes for duplicate data-min-length data-* attributes

input[type="text"].til_l67_text:invalid + [for="til_167"] {
  color: red;
}
input[type="text"].til_l67_text:valid + [for="til_167"] {
  display: none;
}
label[for="til_167"]:after {
  content: "'should add min 5 characters'";
}

<form class="form">
  <div class="ask_con_area67">

    <div id="til_bo_x43">
      <label class="til_l67">Title</label>
      <input class="til_l67_text" 
             id="til_167" 
             type="text" 
             minlength="5" 
             maxlength="100" 
             autocomplete="off" 
             pattern="^[0-9a-zA-Z_.-]{5,100}" 
             required/>
      <label for="til_167"></label>
    </div>

  </div>
</form>