ch5-textinput: minLength & maxLength attributes

usage of minLength attribute
used along with feedbackMode='submit'
in the example bellow by entering less than 10 characters you will not be able to submit the form.

Preview

HTML
JS
CSS

<form id="minLengthForm">
    <ch5-textinput
      minLength="10"
      required
      feedbackMode="submit">
    
    </ch5-textinput>
    <input type="submit" />
</form>

var input = document.querySelector('#minLengthForm input[type="text"]');
var form = document.querySelector('#minLengthForm');

form.addEventListener('submit', function(e) {
  e.preventDefault();
})

input.addEventListener('change', function(e) {
  console.log(e.target.validity);
})

Execute JS before HTML

usage of maxLength attribute used along with feedbackMode='submit'
in the example bellow you will not be able to pass more than 20 characters in the input.

Preview

HTML
JS
CSS

<form id="maxLengthForm">
    <ch5-textinput
      maxLength="20"
      required
      feedbackMode="submit">
    </ch5-textinput>
    <input type="submit" />
  </form>

var input = document.querySelector('#maxLengthForm input[type="text"]');
var form = document.querySelector('#maxLengthForm');

form.addEventListener('submit', function(e) {
  e.preventDefault();
})

input.addEventListener('change', function(e) {
  console.log(e.target.validity);
})

Execute JS before HTML

usage of maxLength attribute without feedbackMode
Result: you should not see the maxLength attribute on the input that's because
the minlength and maxLength attributes are used along with feedbackMode="submit" (open inspect element to see that).

Preview

HTML
JS
CSS

<ch5-textinput
  maxLength="20"
>
</ch5-textinput>

Execute JS before HTML

Crestron Components Lib - Showcase App

ch5-textinput: minLength & maxLength attributes