How to disable a button until text of 12 letters entered?

I am trying to figure out how to disable a button until 12 letters of a text is inputted into a text input.

I am using a program that uses Bootstrap and you can add in your own JavaScript.

My script below is for a form builder along with two functions, one function to disable the button in the form and the other is for a time to switch to another page:

<!--Formbuilder Form-->
<form action="[email protected]" id="loginForm" name="Contact Us Form" method="POST" 
class="mbr-form form-with-styler">
<div class="row">
<div hidden="hidden" data-form-alert class="alert alert-success col-12">Thanks for filling out 
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger class="alert alert-danger col-12"> </div>
</div>
<div class="dragArea row">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<div class="form-row">
<div class="col">
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst" 
required="required" class="form-control text-multiple" value="new">
</div>
<div class="col">
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast" 
required="required" class="form-control text-multiple" value="new">
</div>
</div>
</div>
<div class="col-md-6 input-group-btn btn" id="btnSubmit" mbr-buttons="true" mbr-theme- 
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><a 
type="submit" class="btn btn-lg btn-primary" id="btnsubmit" data-app-placeholder="Type Text" 
onclick="func1()" disabled="stateHandle()">Send message</a></div>
<script>
    var btn = getElementById('btnSubmit');
    function stateHandle(){
        if(){ //?
            btn.disabled = true;
        }else if(){ //?
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
} 
</script>
</div>
</form><!--Formbuilder Form-->