0
128
Viewscheck input on length and use bootstrap validation
I have - I think so - a very simple question. I'm working with Bootstrap 4.6 and I want to have a form-validation for my input.
I need to check if my input has a length of 5 or lower than the validation should be "not fullfiled" (red) otherwise if it's equal or higher than 5 it should be fullfiled, so it should be green.
red:
green:
I want to have that validation from Bootstrap 4.6 - here is the link to this component: https://getbootstrap.com/docs/4.6/components/forms/#validation
Thanks in advance for helping me out!
Here you can see my code:
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>
function checkInput() {
var input = document.getElementById("validationTextarea").value;
if(input.length < 5) {
//it should be red
} else if (input.length >= 5) {
//it should be green
}
}
1 answers
Answer question0
If you want custom validation then you can
1) Remove the was-validated class from the form element, because you want to add custom validation
<form class="m-3">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>
2) Now comes the logic part, where you have to add is-invalid class if values.length < 5 else add is-valid class.
const input = document.querySelector( "#validationTextarea" );
function checkInput() {
var value = document.getElementById( "validationTextarea" ).value;
if ( value.length < 5 ) {
input.classList.remove( "is-valid" );
input.classList.add( "is-invalid" );
} else {
input.classList.add( "is-valid" );
input.classList.remove( "is-invalid" );
}
}
const input = document.querySelector("#validationTextarea");
function checkInput() {
var value = document.getElementById("validationTextarea").value;
if (value.length < 5) {
input.classList.remove("is-valid");
input.classList.add("is-invalid");
} else {
input.classList.add("is-valid");
input.classList.remove("is-invalid");
}
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="m-3">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
</div>
</form>