How to prevent form submission if only one out of two paired inputs is filled out

I have a pair of inputs. I have no problem with a user leaving the both of them blank. But what I need is a way to force the user to fill the second input field if he decides to fill the first input field and vice versa(or prevent form submission in the event of that).

Here are my input elements:

<input name="cas[]" id="ca">
<input name="exams[]" id="exam">

<button type="submit" id="submit">Submit</submit>

I would also appreciate if there is also an implementation for multiple input pairs.

Answer

A simple script like this should do the trick:

var cas = document.getElementById("ca");
var exams = document.getElementById("exam");

cas.onkeyup = function() {nosubmit()}
exams.onkeyup = function() {nosubmit()}

function nosubmit() {
  if ((cas.value != "" && exams.value == "") || (cas.value == "" && exams.value != "")) {
    document.getElementById("submit").disabled = true;
  } else {
    document.getElementById("submit").disabled = false;
  }
}

<input name="cas[]" id="ca">
<input name="exams[]" id="exam">

<button type="submit" id="submit">Submit</button>

UPDATE:

For more than one pair if inputs give them a class name instead of (or as well as) an id and then do this:

var cas = document.getElementsByClassName("ca");
var exams = document.getElementsByClassName("exam");
var numOfPairs = cas.length;

window.oninput = function() {
  if (nosubmit().includes("d")) {
    document.getElementById("submit").disabled = true;
  } else {
    document.getElementById("submit").disabled = false;
  }
}

function nosubmit() {
  var check = ""
  for (i = 0; i < numOfPairs; i++) {
    if ((cas[i].value != "" && exams[i].value == "") || (cas[i].value == "" && exams[i].value != "")) {
      check += "d";
    } else {
      check += "e";
    }
  }
  return check
}

<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">

<button type="submit" id="submit">Submit</button>