Description:
I have three inputs: First name, Last name, and age.
I am looking for a solution if users type all inputs then show validated, and if one of them is empty or user deletes one of them showing invalid.
I try the following lines:
$('#name' && '#lname' && '#age').keyup(function () {
$('#display').removeClass('invalides');
$('#display').replaceWith('Valid');
$('#display').addClass('validated');
});.invalides {
border: 1px solid red;
}
.validated {
border: 1px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" />
<input type="text" id="lname" />
<input type="number" id="age" />
<span id="display" class="invalides">Invalid</span>You may find it in JSFiddle
Why do I use keyup? In the following question, they offers keyup: Real time updating of values on a form
Problem description:
validated after deleting the value of inputs.You should check each input value on input event.
const nameEl = $('#name');
const lnameEl = $('#lname');
const ageEl = $('#age');
$('#name, #lname, #age').on('input', () => {
// if nothing is empty
if(nameEl.val().length && lnameEl.val().length && ageEl.val().length) {
$('#display').removeClass('invalides').addClass('validated').html('Valid');
}
else $('#display').addClass('invalides').removeClass('validated').html('Invalid');
});.invalides {
border: 1px solid red;
}
.validated {
border: 1px solid green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" />
<input type="text" id="lname" />
<input type="number" id="age" />
<span id="display" class="invalides">Invalid</span>