Star

Javascript input mask

The following example shows a information when the data on a input field is completed.

What is your birthday? dd/mm/yyyy

A property data-completed=true is added to the input once the information is completed



Source code

<html>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

<input id='date' data-mask='dd/mm/yyyy'> <span id='status'></span>

<script>
date.onkeyup = function(e) {
    document.getElementById('status').innerHTML = '';

    if (e.target.getAttribute('data-completed') == 'true') {
        document.getElementById('status').innerHTML = 'Complete';
    } else {
        document.getElementById('status').innerHTML = 'Incomplete';
    }
} 
</script>
</html>