ch5-textinput: mask attribute

usage of mask attribute for phone number
Info: this attribute will force you to add a valid phone number,
when the input value doesn't follow the given pattern then you can't submit the input

Preview

HTML
JS
CSS

<ch5-textinput
  label="Phone number:"
  icon="fa fa-phone"
  size="x-large"
  placeholder="Phone Number"
  mask="(+99) 999 999 999"
  id="phoneNumber"
  >
</ch5-textinput>

var input = document.querySelector("#phoneNumber input");
var p = document.createElement('p');
input.parentNode.parentNode.parentNode.appendChild(p);

var ch5textinput = document.querySelector("#phoneNumber");

input.addEventListener('blur', function() {

  ch5textinput.submit();

});
input.addEventListener('blur', function(e) {
    console.log(this.validity.valid);
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

    if(this.value.length === 0) {
        this.parentNode.parentNode.parentNode.querySelector('p').classList.add('hidden');

    }
});
input.addEventListener('maskerror', function(e) {
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

  
  this.parentNode.parentNode.parentNode.querySelector('p').classList.add('invalid-text');
  this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('valid-text');

  this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-times"></span> Phone number is not yet valid'
});

input.addEventListener('maskcomplete', function(e) {
    p.classList.remove('hidden');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.add('valid-text');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('invalid-text');

    this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-check"></span> Phone number is valid';
})

.error { 
    border: 1px solid red;
    
}
.valid { 
    border: 1px solid green;
}

input { 
    outline: 0 !important;   
}

p {
  font-size: 15px;
  margin: 5px;
}

.invalid-text {
  color: red;
}

.valid-text {
  color: green;
}

.hidden {
    
    display: none !important;
}

Execute JS before HTML

usage of mask attribute for USA zipcodes
Info: this attribute will force you to add a USA zipcode

Preview

HTML
JS
CSS

<ch5-textinput
  label="USA Zipcode"
  icon="fa fa-city"
  placeholder="USA Zipcode"
  mask="99999 9999"
  id="zipCode"
  >
</ch5-textinput>

var input = document.querySelector("#zipCode input");
var p = document.createElement('p');
input.parentNode.parentNode.parentNode.appendChild(p);

var ch5textinput = document.querySelector("#zipCode");

input.addEventListener('blur', function() {

  ch5textinput.submit();

});
input.addEventListener('blur', function(e) {
    console.log(this.validity.valid);
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

    if(this.value.length === 0) {
        this.parentNode.parentNode.parentNode.querySelector('p').classList.add('hidden');

    }
});
input.addEventListener('maskerror', function(e) {
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

  
  this.parentNode.parentNode.parentNode.querySelector('p').classList.add('invalid-text');
  this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('valid-text');

  this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-times"></span> Phone number is not yet valid'
});

input.addEventListener('maskcomplete', function(e) {
    p.classList.remove('hidden');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.add('valid-text');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('invalid-text');

    this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-check"></span> Phone number is valid';
})

.error { 
    border: 1px solid red;
    
}
.valid { 
    border: 1px solid green;
}

input { 
    outline: 0 !important;   
}

p {
  font-size: 15px;
  margin: 5px;
}

.invalid-text {
  color: red;
}

.valid-text {
  color: green;
}

.hidden {
    
    display: none !important;
}

Execute JS before HTML

usage of mask attribute for Visa Card Number
Info: you have to be able to add only 16 numbers
See also the js tab how to work with the events on mask

Preview

HTML
JS
CSS

<ch5-textinput
  label="Your VISA number"
  icon="fa fa-credit-card"
  placeholder="Firstname"
  mask="9999 9999 9999 9999"
  id="creditCard"
  >
</ch5-textinput>

var input = document.querySelector("#creditCard input");
var p = document.createElement('p');
input.parentNode.parentNode.parentNode.appendChild(p);

var ch5textinput = document.querySelector("#creditCard");

input.addEventListener('blur', function() {

  ch5textinput.submit();

});
input.addEventListener('blur', function(e) {
    console.log(this.validity.valid);
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

    if(this.value.length === 0) {
        this.parentNode.parentNode.parentNode.querySelector('p').classList.add('hidden');

    }
});
input.addEventListener('maskerror', function(e) {
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

  
  this.parentNode.parentNode.parentNode.querySelector('p').classList.add('invalid-text');
  this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('valid-text');

  this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-times"></span> Phone number is not yet valid'
});

input.addEventListener('maskcomplete', function(e) {
    p.classList.remove('hidden');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.add('valid-text');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('invalid-text');

    this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-check"></span> Phone number is valid';
})

.error { 
    border: 1px solid red;
    
}
.valid { 
    border: 1px solid green;
}

input { 
    outline: 0 !important;   
}

p {
  font-size: 15px;
  margin: 5px;
}

.invalid-text {
  color: red;
}

.valid-text {
  color: green;
}

.hidden {
    
    display: none !important;
}

Execute JS before HTML

usage of mask attribute for prices
Info: adding a price following the pattern

Preview

HTML
JS
CSS

<ch5-textinput
  label="Price:"
  icon="fa fa-money-bill-wave-alt"
  placeholder="Price"
  mask="9,99"
  id="price"
  >
</ch5-textinput>

var input = document.querySelector("#price input");
var p = document.createElement('p');
input.parentNode.parentNode.parentNode.appendChild(p);

var ch5textinput = document.querySelector("#price");

input.addEventListener('blur', function() {

  ch5textinput.submit();

});
input.addEventListener('blur', function(e) {
    console.log(this.validity.valid);
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

    if(this.value.length === 0) {
        this.parentNode.parentNode.parentNode.querySelector('p').classList.add('hidden');

    }
});
input.addEventListener('maskerror', function(e) {
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('hidden');

  
  this.parentNode.parentNode.parentNode.querySelector('p').classList.add('invalid-text');
  this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('valid-text');

  this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-times"></span> Phone number is not yet valid'
});

input.addEventListener('maskcomplete', function(e) {
    p.classList.remove('hidden');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.add('valid-text');
    this.parentNode.parentNode.parentNode.querySelector('p').classList.remove('invalid-text');

    this.parentNode.parentNode.parentNode.querySelector('p').innerHTML = '<span class="fa fa-check"></span> Phone number is valid';
})

.error { 
    border: 1px solid red;
    
}
.valid { 
    border: 1px solid green;
}

input { 
    outline: 0 !important;   
}

p {
  font-size: 15px;
  margin: 5px;
}

.invalid-text {
  color: red;
}

.valid-text {
  color: green;
}

.hidden {
    
    display: none !important;
}

Execute JS before HTML

Crestron Components Lib - Showcase App

ch5-textinput: mask attribute