I have this event listener function
document.addEventListener('input', function (e) {
if (e.target.classList.contains('mileage-validation')) {
if (document.getElementById('warningMileage').value > document.getElementById('scheduledMileage').value) {
document.getElementById('mileageError').classList.toggle('hidden');
}
else {
document.getElementById('mileageError').classList.toggle('hidden');
}
}
})
with the following markup in a razor view
<li>@Html.LabelFor(m => m.Maintenance.ScheduledMileage) @Html.EditorFor(m => m.Maintenance.ScheduledMileage, new { htmlAttributes = new { @class = "form-control mileage-validation", id = "scheduledMileage" } })</li>
<li>@Html.ValidationMessageFor(m => m.Maintenance.ScheduledMileage, null, new { @class = "validation-error" })</li>
<li>@Html.LabelFor(m => m.Maintenance.WarningMileage) @Html.EditorFor(m => m.Maintenance.WarningMileage, new { htmlAttributes = new { @class = "form-control mileage-validation", id = "warningMileage" } })</li>
<li>
@Html.ValidationMessageFor(m => m.Maintenance.WarningMileage, null, new { @class = "validation-error" })
<span class="validation-error hidden" id="mileageError">Warning Mileage should be less than Scheduled Mileage.</span>
</li>
I'm trying to front end validate that the WarningMileage value is less than the ScheduledMileage value (displaying an error if false) before the user submits.
Test - input 10 in Scheduled Mileage field with 0 in Warning Mileage field Result - error is display
wrong
Test - input 9 in Warning Mileage field with 10 still in Scheduled Mileage field Result - error is hidden
correct
Test - Go back to Scheduled Mileage field and increase value to 11 Result - error is displayed (but warning mileage is less than scheduled mileage!)
wrong
Hope this makes sense, no doubt it's something silly. Thanks in advance!