Javascript 二つのフォームの値を比較してページ遷移に制限を掛ける

目的

スポーツのアプリを作成中。
結果の送信画面にて引き分けが存在しないスポーツなので表側で制限を掛けたい。

ソースコード

    <%= form_for game, url: game_score_path do |f| %>
      <div class='form-group'>
        <%= f.label :自分の得点 %>
        <%= f.number_field :score1, class:'form-control', id:'member1-score' %>
      </div>
      <div class='form-group'>
        <%= f.label :相手の得点 %>
        <%= f.number_field :score2, class:'form-control', id:'member2-score' %>
      </div>
      <div class="mb-2">
        <span class="form-group error" aria-live="polite"></span>
      </div>
      <div class='form-group text-center'>
        <%= f.submit '申請する', data: {confirm:'入力に誤りはありませんか?'}, class:'btn btn-lightblue mx-auto', id:'scoreButton' %>
      </div>
    <% end %>

var form  = document.getElementsByTagName('form')[0];
var error = document.querySelector('.error');
var score1Form = document.getElementById("member1-score");
var score2Form = document.getElementById("member2-score");
var button = document.getElementById("scoreButton");
score1Form.addEventListener("input", function (event) {
  var score1 = document.getElementById("member1-score").value;
  var score2 = document.getElementById("member2-score").value;
  if (!score1 == score2) {
    error.innerHTML = ""; 
    error.className = "error";
  }
}, false);
score2Form.addEventListener("input", function (event) {
  var score1 = document.getElementById("member1-score").value;
  var score2 = document.getElementById("member2-score").value;
  if (!score1 == score2) {
    error.innerHTML = "";
    error.className = "error";
  }
}, false);
button.onclick = function(){
  $('form').submit(function () {
    var score1 = document.getElementById("member1-score").value;
    var score2 = document.getElementById("member2-score").value;
    if (score1 == "" || score2 == "") {
      error.innerHTML = "スコアを入力してください";
      error.className = "error active";
      return false;
    } else if(score1 == score2){
      error.innerHTML = "勝敗がつくスコアを入力してください";
      error.className = "error active";
      return false;
    } else{
      this.submit();
    }
  });
};

.error {
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

解説

送信ボタンを押した時にスコアが同点もしくは一方でも空の場合にエラー文が一文でます。
その時に一文字でもどちらか一方でも入力があればエラー文を即座に消す処理です。
エラー二つに分けて書いてますが同じ場所に出力する仕様ですので配列の変数にしてeachで回した方が短いし見易い。

参考

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation
エラー、構造に関してはこちらを拝借。