Trigger JQuery validation for multiple elements instantly

Question

I have four elements and each of them are connected with others about validity. For example, elements are a,b,c and d. If d is empty, user must enter some values for a,b,c and if a,b,c are empty, user must enter some values for d. I created a custom validation as you can see on snippet but it naturaly checks for only focused input so if you give some values on a,b and c, it will only validates c and for a and b, you have to focus them again. I want this validation to trigger same time for all this inputs and if it returns true, declare valid all others. Can you please help me?

Edit for a better example: When first click on submit button, it will show as invalid for all inputs because they are empty. putting some values on d is enough to validate form so when i put some values on d and out focus from it, i want all inputs updated as valid.

Thanks.

(function ($) {
        $.validator.addMethod('adreskontrol', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adreskontrol');

$('#btn').click(function() {
    if($("#test").valid() === false) {
        //What to do if validation fails
    } else if($("#test").valid() === true) {
        //Show the preview and let the user either make changes or submit the final result
    }
});

.input-validation-error
{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id="test">
   a:  <input type="text" name="testa" class="testa" id="a" data-val-adreskontrol = "checka" data-val = "true">
<label for="testa"></label>
</br>
   b:  <input type="text" name="testb" class="testa" id="b" data-val-adreskontrol = "checkb" data-val = "true">
<label for="testb"></label>
</br>
   c:  <input type="text" name="testc" class="testa" id="c" data-val-adreskontrol = "checkc" data-val = "true">
<label for="testc"></label>
</br>
   d:  <input type="text"  name="testd" class="testa" id="d" data-val-adreskontrol = "checkd" data-val = "true">
<label for="testd"></label>
</br>
<input type="submit" id="btn" value="Test"/>

</form>

Answer 1

I handled it by recheck form validation on keyup any of this inputs like that:

(function ($) {
        $.validator.addMethod('adressCheck', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adressCheck');

   $(".adressInput").on("keyup", function () {
        $("#testForm").valid();
  });
    
    
  $('#btn').click(function() {
      if($("#testForm").valid() === false) {

      } else if($("#testForm").valid() === true) {

      }
  });

.input-validation-error
{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id="testForm">
   a:  <input type="text" name="testa" class="adressInput" id="a" data-val-adressCheck = "checka" data-val = "true">
<label for="testa"></label>
</br>
   b:  <input type="text" name="testb" class="adressInput" id="b" data-val-adressCheck = "checkb" data-val = "true">
<label for="testb"></label>
</br>
   c:  <input type="text" name="testc" class="adressInput" id="c" data-val-adressCheck = "checkc" data-val = "true">
<label for="testc"></label>
</br>
   d:  <input type="text"  name="testd" class="adressInput" id="d" data-val-adressCheck = "checkd" data-val = "true">
<label for="testd"></label>
</br>
<input type="submit" id="btn" value="Test"/>

</form>