JSでリアルタイムバリデーション

Question

お世話になります。
下記のHTMLのように金額の範囲を求めるようなformを作成しております。
ここでJSまたはJqueryで上限金額を入力した場合、後から入力される下限金額が上限金額未満しか入力できず、その旨のwarningが出るポップアップを出す、リアルタイムバリデーションをかけたいと考えております。

今回少し複雑な点は、先に下限金額を入力されて場合、逆のバリデーションもリアルタイムにかけなくてならない点になります。
このようなことを実装することは可能でしょうか？

JSにまだまだ不案内なため、具体的なコードがなかなか思い浮かばない状況です。
恐れ入りますが、こんな機能を使えば出来るや、このサイトを参照せよみたいな、助言を
頂けるだけでもとてもありがたいです。
何卒、よろしくお願い申し上げます。

<label>上限金額</label>
<input id="moneyMax" name="jogen" type="text" placeholder="100">

<label>下限金額</label>
<input id="moneyMin" name="kagen" type="text" placeholder="1">

Answer 1

たとえばこんな感じ

<script>
document.addEventListener('input',function(e){checkkagen(e);});
function checkkagen(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.id=="moneyMin"){
    var moneymax=parseFloat(document.getElementById('moneyMax').value)||0;
    var moneymin=parseFloat(document.getElementById('moneyMin').value)||0;
    if(moneymin>=moneymax){
      alert('over!');
      document.getElementById('moneyMin').value="";
    }
  }
}
</script>
<label>上限金額</label>
<input id="moneyMax" name="jogen" type="text" placeholder="100">

<label>下限金額</label>
<input id="moneyMin" name="kagen" type="text" placeholder="1">

追記

両方に数値が入っていない場合は判定しないのであればこう？

document.addEventListener('input',function(e){checkkagen(e);});
function checkkagen(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.id=="moneyMin"){
    var moneymax=parseFloat(document.getElementById('moneyMax').value);
    var moneymin=parseFloat(document.getElementById('moneyMin').value);
    if(!isNaN(moneymax && moneymin)){
      if(moneymin>=moneymax){
        alert('over!');
        document.getElementById('moneyMin').value="";
      }
    }
  }
}

Comments

[SugiuraY]

yambejp様
いつもご回答ありがとうございます。この場合下限の金額を先に入れるだけでalertが出てしまいますが、すべてに対応しようとする場合、①moneyMaxが先に入力されている場合、moneyMinが先入力されている場合、③moneyMaxとmoneyMinがどちらも記載されている場合に分岐させるイメージでしょうか？
③のケースは一旦、大小が正しくinputされたが、後から再入力して反対になってしまうようなケースです。

[yambejp]

minが先入力されている場合、あとからmaxを入れるのは無理がありませんか？
たとえばmin=10といれたあと、maxを20といれようとおもっても、最初の「2」を入れた瞬間、2<10なのでalertがでてしまいます。

ソースではmaxが未入力の時０とみなしましたが、NaNとして処理していいなら別の処理もできます

[SugiuraY]

ご回答有難うございます。確かに相互にけん制しあうようなバリデーションは設計から考え直します。
また、やり方については非常に勉強になりました。
宜しくお願い申し上げます。