Hi David,
Something like this?
I had to modify the code a fair bit so you will have to make some changes to the variables and the input fields that trigger the event, but hopefully this helps. For the sake of simplicity, I changed the field names to fieldA (Lot Check), fieldB (Stock Check Code), fieldC (AltKey2), and fieldD (2AltKey2). You will want to change those to your corresponding CSS classes/IDs.
$(document).ready
(
function ()
{
//variable to determine if the form inputs are valid; used for custom errors
var formValid = true;
//call the checkfields function if any input is changed
// !!! modify this to only have it trigger when the user input is changed
$('.fieldTable, .fieldB, .FieldD').on('change','input',
function ()
{
formValid = checkFields();
}
);
$('input[type=submit]').click
(
function(e)
{
//call the checkfields function again to see if all inputs are valid
formValid = checkFields();
if(!formValid)
{
e.preventDefault(); //stop the form from being submitted
}
}
);
}
);
function checkFields()
{
var formValid = true;
validFieldA = [];
validFieldC = [];
//check each fieldA input if they match with fieldB
$('.fieldTable .fieldA input').each(function (i, v)
{
if($(this).val() != $('.fieldB input').val())
{
validFieldA[i] = false;
}
else
{
validFieldA[i] = true;
}
});
//check each fieldC input to see if they match with field D,
//ONLY if the corresponding field A was invalid
$('.fieldTable .fieldC input').each(function (i, v)
{
if(validFieldA[i] === false)
{
if($(this).val() != $('.fieldD input').val())
{
//both fieldA and fieldC are invalid
validFieldC[i] = false;
}
else
{
//fieldA is invalid, fieldC is valid however
validFieldC[i] = true;
}
}
else
{
//fieldC may be valid or invalid, but fieldA is valid so it doesn't matter
validFieldC[i] = true;
}
});
//for each of the fieldA inputs
$.each($('.fieldTable .fieldA input'), function (i, v)
{
//check if the corresponding fieldA and fieldC inputs are invalid
//but don't show errors caused by fieldA inputs being blank
if(validFieldA[i] == false && validFieldC[i] == false && $(this).val() != '')
{
//remove existing error
$(this).removeClass('custom-error');
$(this).siblings('.custom-error-message').remove();
//show error
$(this).addClass('custom-error');
//$(this).focus(); //disabled focus
$(this).parent().append('<p class="custom-error-message">This Lot Number does not match the Sales Order - please verify.</p>');
//form is now invalid
formValid = false;
}
else
{
//this row is valid. Hide error for this row
$(this).removeClass('custom-error');
$(this).siblings('.custom-error-message').remove();
}
});
//return true if there are NO errors
return formValid;
}