html check if input is greater than other input after submit

Question

I have two input fields and want to check if one field is greater than the other. I want to check this before the submit-Button is clicked.

Do I need jquery? I want to do this check before checking the submt button.

Answer 1

Try adding some JavaScript to your code! Maybe like such:

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>
<div id=log><div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $('#submit_check').on('submit', function (e) {
        if (parseInt($("#min_value").val()) > parseInt($("#max_value").val())) {
            document.getElementById('log').innerHTML = "min is larger than max";
        } else {
            document.getElementById('log').innerHTML = "max is larger than min";
        }
    }
);

</script>