Descripción:
Tengo tres entradas: nombre, apellido y edad. Estoy buscando una solución si los usuarios escriben todas las entradas y luego se muestran validated , y si una de ellas está vacía o el usuario elimina una de ellas y muestra que no es invalid .
Intento las siguientes lineas:
$('#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>Puede encontrarlo en JSFiddle
¿Por qué uso keyup? En la siguiente pregunta, ofrecen keyup: Actualización en tiempo real de valores en un formulario
Descripción del problema:
validated después de eliminar el valor de las entradas.Debe verificar cada valor de input en el evento de entrada.
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>