.each() loop only works after data is entered into first row of text inputs
Hi all,
I've been flitting in and out of jQuery and PHP to see how best to validate my form, so I may've asked a similar question in another thread as I was trying to make some sort hybrid validation work.
That got a bit complicated for my rookie brain so it's all/mostly jQuery now.
Sorry my thread title couldn't have been a bit more useful, it's a strange problem (I think). I have 20 text inputs, two on each row. Each row I call a "pair" of text inputs.
My starting criteria is:
- If all text inputs are empty, alert, else...
- Loop through each pair of text inputs - if at least one input in a pair has a value, validate further (in this case I'm changing the parent DIV of each pair that passes this test to lime, to indicate that the code has worked and further validation is possible).
The code:
- $('[name="myForm"]').submit(function(event) {
event.preventDefault(); // prevent form submission for testing
// all form fields empty?
if ($('input:text').val().trim().length == 0) {
$('form div').css({'background': ''});
alert("All form fields empty!");
}
else {
// pair validation
$('form > div').each(function() {
// ...if at least one input in the pair has a value, validate
if (($(this).find('input').eq(0).val().trim().length > 0) || ($(this).find('input').eq(1).val().trim().length > 0)) {
// ...change background colour to indicate that the code worked
$(this).css({'background': 'lime'});
}
else {
$(this).css({'background': ''});
}
}); // end pair validation
} // end all form fields empty?
}); // end submit event
- <div>
<input type="text" name="CarID[]" value="" maxlength="20" />
<input type="text" name="CarTitle[]" value="" maxlength="175" />
</div>
- ...9x more of this...
The "pair validation" block works just fine on its own outside of the "all form fields empty?" wrapper.
However in this set-up, the "pair validation" block will only execute if I enter a value in one of the text inputs on the first row only.
If my first act on this page is to enter a value in any input on the second, or fourth, or ninth row etc, I get an alert telling me all form fields are empty when they're clearly not!
Why do I need to enter a value in an input on the first row to initialise the "pair validation" block?
It should just work if at least one form field has a value because that should make the "all form fields empty?" block return false.
I've got a funny feeling it's a simple fix but it's eluding me.