javascript - Only display 1 JQ Validator Error Message For A Group Of Inputs (Sort Code)

Question

I'm new to JQuery Validator so trying to add it to an existing project but I have a set of 3 inputs for a 'Sort Code' that I want to validate all 3 as they are all required but I only want one error message and I want the message below the inputs.

I can't seem to find anything on this and I'm stuck on how to achieve this

HTML

$('#submit').click(function() {
  $("#mainPanelForm").validate();
})

.error {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

label.error {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #a94442;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<form id="mainPanelForm" autocomplete="off">
  <div class="row d-flex align-items-center">
      <div class="col-12 col-lg-3 col-xl-4 pr-xl-0 font-weight-bold">
          Sort code: <span class="text-danger">*</span>
      </div>
      <div class="col-2 d-flex inline-flex">
          <input id="bdFirstSortCode" name="bdFirstSortCode" class="form-control col-12 col-lg-2 col-xl-3 mand auto" type="search"
                  maxlength="2" value="" placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required />
          <span class="d-flex align-items-center px-3">-</span>
          <input id="bdSecSortCode" name="bdSecSortCode" class="form-control col-12 col-lg-2 col-xl-3 mand auto" type="search" 
                  maxlength="2" value="" placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required />
          <span class="d-flex align-items-center px-3">-</span>
          <input id="bdLastSortCode" name="bdLastSortCode" class="form-control col-12 col-lg-2 col-xl-3 mand auto" type="search" 
                  maxlength="2" value="" placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required />
      </div>
  </div>
  <br />
  <button id="submit" class="btn btn-sm btn-primary" type="submit">
    Update details
</button>
</form>

question from:https://stackoverflow.com/questions/66061228/only-display-1-jq-validator-error-message-for-a-group-of-inputs-sort-code

Answer 1

Waitting for answers