Tengo un formulario con un botón deshabilitado al principio y si deja una entrada vacía o la llena con algo que no sean números, generará un error y si inserta un número, el error se eliminará. Mi pregunta es cómo puedo eliminar el atributo de desactivación del botón después de que todas las entradas estén libres de errores. Aquí lo que he intentado hasta ahora:
$("input").blur(function () { if (!Number($(this).val()) || $(this).val() === "") { $(this).addClass("raise-error"); } else { $(this).removeClass("raise-error"); } }); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; } .container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; } .team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .team-a { background-color: bisque; } .error { text-align: right; color: red; opacity: 0; } .raise-error + .error { opacity: 1; } input.raise-error { border: 1px solid red; } .record-box { margin-top: 20px; } label { margin-right: 10px; } .btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button>data-valid="false" .data-valid="false" se cambian a data-valid="true"Prueba esto
$("input").blur(function() { if (!Number($(this).val()) || $(this).val() === "") { $(this).addClass("raise-error"); $(this).attr('data-valid', 'false'); } else { $(this).removeClass("raise-error"); $(this).attr('data-valid', 'true'); } $('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled'); }); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; } .container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; } .team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .team-a { background-color: bisque; } .error { text-align: right; color: red; opacity: 0; } .raise-error+.error { opacity: 1; } input.raise-error { border: 1px solid red; } .record-box { margin-top: 20px; } label { margin-right: 10px; } .btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="some-container"> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" data-valid="false" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" data-valid="false" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" data-valid="false" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button> </div>La forma más directa y segura es reutilizar su función de validación para probar tanto si la entrada es válida como si todas las entradas son válidas.
El siguiente ejemplo coloca las entradas donde se adjunta el desenfoque en la variable allInputs , y el botón está deshabilitado si no todas las entradas son válidas (con cada función llamando a la misma funcionalidad isValid )
const allInputs = $("input").blur(function () { const isValid = val => val !== "" && Number(val); $(this).toggleClass("raise-error",!isValid(this.value)); $('.btn')[0].disabled = !allInputs.toArray().every(i=>isValid(i.value)); }); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; } .container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; } .team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .team-a { background-color: bisque; } .error { text-align: right; color: red; opacity: 0; } .raise-error + .error { opacity: 1; } input.raise-error { border: 1px solid red; } .record-box { margin-top: 20px; } label { margin-right: 10px; } .btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button>Si el siguiente código no funciona:
if ($('.raise-error').length > 0) { $('.btn').attr( 'disabled', true ); return true; }Luego, intente cambiar la etiqueta del botón con:
<input type="button" class="btn">