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.

<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>

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

Possible duplicate of [javascript: validate form before submit?](http://stackoverflow.com/questions/27918843/javascript-validate-form-before-submit) — Zdeněk Bednařík, Mar 30 '17 at 12:08

score 3 · Answer 1 · edited Jul 18 '19 at 13:59

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>

as it looks like @Alex is new to this, just pointing out that this is jQuery and will need the jQuery library adding to the page before it will work. — Panomosh, Mar 30 '17 at 12:11
Thank you for pointing that out @Panomosh, i added the library link! — Anna Jeanine, Mar 30 '17 at 12:15

score 2 · Accepted Answer · answered Mar 30 '17 at 12:20

Try as below, it checks if value of first input is greater then second or not, but using blur event Listener before clicking submit button.

var frst = document.querySelector("#min_value");
var secnd = document.querySelector("#max_value");
var para = document.createElement("p");
function blr(){
  var ab = frst.value;
  var vc = secnd.value;
  if(ab == "" && vc == ""){
  para.textContent = "Please enter value in both.";
  document.body.appendChild(para);
  }
  else if(ab >= vc){
  para.textContent = "Value present in first input is greater then second.";
  document.body.appendChild(para);
  }
  else if(vc >= ab){
    para.textContent = "Value present in Second input is greater then First.";
  document.body.appendChild(para);
  }
}
secnd.addEventListener("blur",blr);

<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>

Zdeněk Bednařík · Answer 3 · 2017-03-30T12:10:36.927

0

HTML is only a markup language. If you want your web to have some functionality you have to use JavaScript Jquery or Php.

You can try something like this:

Ust <form> tag attribute onsubmit:

<form name="myForm" onsubmit="return validateForm()" method="post">

edited Mar 30 '17 at 12:10

answered Mar 30 '17 at 12:02

Zdeněk Bednařík

247
2
15

score 0 · Answer 4 · answered Mar 30 '17 at 12:16

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form onsubmit="return validate();">
    <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>

</form>

<script>
function validate() {
if ($("#min_value").val() > $("#max_value").val()) {
    
    alert("min_value field > max_value");
} else {
    alert("max_value field > min_value");
}
}
</script>

score 0 · Answer 5 · answered Mar 30 '17 at 13:17

You can try like his also

HTML

<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" onclick="return validate();"> Let´s Go </button>

Script

function validate(){
     var max = parseInt(document.getElementById('max_value').value);
     var min = parseInt(document.getElementById('min_value').value);
     if(min > max){
         alert('Minvalue is greter than Maxvalue');
          return false;
     }else{
           alert('Maxvalue is greter than Minvalue');
          return false;
     }

}

Thanks,

html check if input is greater than other input after submit

5 Answers5