Ways to prevent a button from being enabled until a 12-letter text is inputted

Question

Ways to prevent a button from being enabled until a 12-letter text is inputted

I need assistance with disabling a button until a minimum of 12 characters are entered into a text input field.

The platform I am working on utilizes Bootstrap and allows for custom JavaScript implementation.

Below is my code for a form builder that includes two functions - one to disable the submit button until the condition is met, and another to redirect to a different page after a set time:

<!--Formbuilder Form-->
<form action="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e293978386918d8496cc8b8c848da29b838a8d8af2fccd88eac0">••••••••</a>" 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(){ //Condition to check for 12 characters
            btn.disabled = true;
        }else if(){ //Another condition
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
} 
</script>
</div>
</form><!--Formbuilder Form-->

javascript forms button bootstrap-4 disable

Answer 1

Answer №1

To monitor user input on a specific field, you can implement an EventListener that triggers a function each time the user interacts with the field.

document.getElementById('username').addEventListener("input", checkInput);
  
function checkInput() {   
  var button = document.getElementById('submitBtn');
  var textField = document.getElementById('username')
    if(textField.value.length < 10){ // Disable the button if input length is less than 10 characters
        button.disabled = true;
    } else { // Enable the button for 10 or more characters
        button.disabled = false;
    }
}

function redirectToIndex(){
    window.setTimeout(function() {
      window.location.href = 'index.html';
    }, 3000);     
}

<!-- Form Builder Layout -->
<form action="mailto:someone@example.com" id="userForm" name="User Information Form" method="POST" 
class="form-builder form-with-design">
<div class="row">
<div hidden="true" data-form-alert class="alert alert-success col-12">Thank you for submitting your information! We will get back to you soon.</div>
<div hidden="true" data-form-alert-danger class="alert alert-danger col-12"> Error! Please try again.</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="username" name="username" placeholder="Enter Username" data-form-field="nameFirst" required="required" class="form-control text-input" value="new">
</div>
<div class="col">
<input type="password" id="password" name="password" placeholder="Enter Password" data-form-field="nameLast" required="required" class="form-control text-input" value="new">
</div>
</div>
</div>
<div class="col-md-6 input-group-btn btn" id="submitButton" mbr-buttons="true" mbr-theme-style="btn-primary" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><button 
type="submit" class="btn btn-lg btn-primary" id="submitBtn" data-app-placeholder="Type Text" disabled>Submit</button></div>

</div>
</form><!-- End of Form Builder Layout -->

Answer 2

To monitor user input on a specific field, you can implement an EventListener that triggers a function each time the user interacts with the field.

document.getElementById('username').addEventListener("input", checkInput);
  
function checkInput() {   
  var button = document.getElementById('submitBtn');
  var textField = document.getElementById('username')
    if(textField.value.length < 10){ // Disable the button if input length is less than 10 characters
        button.disabled = true;
    } else { // Enable the button for 10 or more characters
        button.disabled = false;
    }
}

function redirectToIndex(){
    window.setTimeout(function() {
      window.location.href = 'index.html';
    }, 3000);     
}

<!-- Form Builder Layout -->
<form action="mailto:someone@example.com" id="userForm" name="User Information Form" method="POST" 
class="form-builder form-with-design">
<div class="row">
<div hidden="true" data-form-alert class="alert alert-success col-12">Thank you for submitting your information! We will get back to you soon.</div>
<div hidden="true" data-form-alert-danger class="alert alert-danger col-12"> Error! Please try again.</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="username" name="username" placeholder="Enter Username" data-form-field="nameFirst" required="required" class="form-control text-input" value="new">
</div>
<div class="col">
<input type="password" id="password" name="password" placeholder="Enter Password" data-form-field="nameLast" required="required" class="form-control text-input" value="new">
</div>
</div>
</div>
<div class="col-md-6 input-group-btn btn" id="submitButton" mbr-buttons="true" mbr-theme-style="btn-primary" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><button 
type="submit" class="btn btn-lg btn-primary" id="submitBtn" data-app-placeholder="Type Text" disabled>Submit</button></div>

</div>
</form><!-- End of Form Builder Layout -->

Answer 3

Answer №2

To begin, utilize the document.getElementById method.

Below is an example of how to implement this:

<input id='userInput'>
<button onclick=`executeEvent()`>

let inputField = document.getElementById(`userInput`);
function executeEvent() {
if(inputField.value.length > 11) {.../*perform your function */}
}

The conditional statement ensures that the function will only run if the input box contains at least 12 characters.

Answer 4

To begin, utilize the document.getElementById method.

Below is an example of how to implement this:

<input id='userInput'>
<button onclick=`executeEvent()`>

let inputField = document.getElementById(`userInput`);
function executeEvent() {
if(inputField.value.length > 11) {.../*perform your function */}
}

The conditional statement ensures that the function will only run if the input box contains at least 12 characters.

Ways to prevent a button from being enabled until a 12-letter text is inputted

Answer №1

Answer №2

Similar questions

Unable to refresh changing list of checkboxes

Utilizing the jQuery setInterval method

What is the process for making a custom texture map to use in ThreeJS materials?

Negative outcome resulting from utilizing ng-pattern (Angular.JS) along with unicode characters

What is the process for configuring the scss/sass file in Django?

Validate forms using jQuery with hidden fields

Are there any conventional methods for modifying a map within an Aerospike list?

Issues with making cross-domain requests using jQuery and PHP

Play button and directional indicators missing from Bootstrap video carousel

Loop through your elements seamlessly with the innovative Jquery loop plugin

How can I utilize the JQuery GetJSON function to retrieve HTML content from an external webpage?

Tips for minimizing excessive repetition in your for loops

I'm struggling to transfer information from my form to TypeScript in Angular

A guide on incorporating multiple nested loops within a single table using Vue.js

Failure to showcase AJAX JSON data on DataTable

Establishing a pre-selected option in a drop-down menu

Efficiently managing AJAX requests and handling form submissions

Angular's Enhanced Feature: Selecting Multiple Columns

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

Unable to incorporate an external JavaScript file via a static URL