I have an HTML structure like the following,
$(".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>And on save button click function, I want to check all of these first zip field value is less than the last zip field value,
I could do the same for only the first <tr>, but how to do that for all of them at a time?
You need to loop through those table rows, whereas you were only grabbing the values for the first row. I gave the table a classname and then looped through the tr tags. Also note this syntax: +$(this).find('.zip-first').val() - that little plus sign converts this string into a number so I can make the comparison. Also, I made a div at the bottom to hold the 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>Consider the following example.
$(".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>I have cleaned up your HTML Table. You should not include elements like <br> inside table rows. I also wrapped it with the proper <table> element.
As was suggested, you must iterate over each row and examine the Inputs in that row. You can do this with $(elem).find(".zip-first") or the shorthand, $(".zip-first", elem). Input elements return a String Value, so for better comparison, it is best to cast it as an Integer.
It is sometimes better to add or remove classes as needed. You can also use .toggleClass("invalid") to easily add / remove a single class.
See More: