Tengo una estructura HTML como la siguiente,
$(".zip-save").on('click', function(e) { e.preventDefault(); var isFormValid = true; var zip_start = $('.zip-first').val(); var zip_end = $('.zip-last').val(); console.log("start = " + zip_start + ",end = " + zip_end); if (zip_start > zip_end) { $('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)'); $(this).parents('div').before("<p>zip-to value must be greater than zip-from</p>"); } else { $('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> </br> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> </br> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> </br> <button class="zip-save">Save</button>Y en la función de clic del botón Guardar, quiero verificar que todos estos valores del primer campo zip sean menores que el último valor del campo zip,
Podría hacer lo mismo solo con el primer <tr> , pero ¿cómo hacerlo con todos a la vez?
Debe recorrer esas filas de la tabla, mientras que solo estaba tomando los valores de la primera fila. Le di a la tabla un nombre de clase y luego recorrí las etiquetas tr. También tenga en cuenta esta sintaxis: +$(this).find('.zip-first').val() - ese pequeño signo más convierte esta cadena en un número para que pueda hacer la comparación. Además, hice un div en la parte inferior para contener el error.
$(".zip-save").on('click', function(e) { e.preventDefault(); let isFormValid = true; $('.zip-table tr').each(function() { let zip_start = +$(this).find('.zip-first').val() let zip_end = +$(this).find('.zip-last').val(); // console.log("start = " + zip_start + ",end = " + zip_end); if (zip_start > zip_end) { $(this).find('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)'); $('.error').html("zip-to value must be greater than zip-from"); } else { $(this).find('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class='zip-table'> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> </table> <div class='error'></div> <button class='zip-save'>Save</button>Considere el siguiente ejemplo.
$(".zip-save").on('click', function(e) { e.preventDefault(); var isFormValid = true; var zip_start; var zip_end; $("table tr").each(function(index, elem) { zip_start = parseInt($(".zip-first", elem).val()); zip_end = parseInt($(".zip-last", elem).val()); if (zip_start > zip_end) { console.log(zip_start, zip_end, "invalid"); $('.zip-last', elem).removeClass("valid").addClass("invalid"); } else { console.log(zip_start, zip_end, "valid"); $('.zip-last', elem).removeClass("invalid").addClass("valid"); } }); }); input.valid { border-color: rgba(33, 33, 33, 0.12; } input.invalid { border-color: rgba(218, 71, 58, 0.5); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> <tr> <td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td> <td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td> </tr> </table> <button class="zip-save">Save</button> He limpiado su tabla HTML. No debe incluir elementos como <br> dentro de las filas de la tabla. También lo envolví con el elemento <table> adecuado.
Como se sugirió, debe iterar sobre cada fila y examinar las Entradas en esa fila. Puede hacer esto con $(elem).find(".zip-first") o la forma abreviada, $(".zip-first", elem) . Los elementos de entrada devuelven un valor de cadena, por lo que para una mejor comparación, es mejor convertirlo como un número entero.
A veces es mejor agregar o eliminar clases según sea necesario. También puede usar .toggleClass("invalid") para agregar o eliminar fácilmente una sola clase.
Ver más: