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.

>Solution :

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