Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 76028

JavaScript input validation - unexpected results

$
0
0

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.

  1. Test - input 10 in Scheduled Mileage field with 0 in Warning Mileage field Result - error is display enter image description here

    wrong

  2. Test - input 9 in Warning Mileage field with 10 still in Scheduled Mileage field Result - error is hidden enter image description here

    correct

  3. Test - Go back to Scheduled Mileage field and increase value to 11 Result - error is displayed (but warning mileage is less than scheduled mileage!) enter image description here

    wrong

Hope this makes sense, no doubt it's something silly. Thanks in advance!


Viewing all articles
Browse latest Browse all 76028

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>