The question originally was tagged with functional-programming, but it seems more declarative/procedural than functional, other than the fact that callback functions are passed to the click handlers.

The answer by Nomis is good: one can iterate over the values in criteria and as soon as a blank value is found, show the error message container. A functional approach for this would be to use Object.values() to get the array of values in criteria and then utilize Array.every() to look for empty values:

var allNonEmpty = Object.values(criteria).every(function(entry) {
    return entry.length;
});
if (!allNonEmpty) {
    $('#compError').show();
}

If you are supporting ES-2015 (A.K.A. es-6) then an arrow function can make that shorter:

const allNonEmpty = Object.values(criteria).every(entry => entry.length);

It is also advisable to cache DOM lookups instead of performing them each time. So when the page loads, it might be best to store a reference to each input in a variable (or, if using es-6, a constant using const). See the expandable snippet below for an example.

$(function() { //jQuery DOM-ready callback
  var inputFields = {
    company: $('#company'),
    partnercode: $('#partnercode'),
    office: $('#office')
  };
  var compError = $('#compError');
  $('#saveSubmit').on('click', function() {
    var allNonEmpty = Object.values(inputFields).every(function(inputField) {
      return $(inputField).val().length;
    });
    if (!allNonEmpty) {
      compError.show();
      return;
    }
    else {
      compError.hide();
      //AJAX code
    }
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="banner-message">
  <pThe Form</p>
    <div>
      Company: <input id="company" />
    </div>
    <div>
      Partner: <input id="partnercode" />
    </div>
    <div>
      office: <input id="office" />
    </div>
    <button id="saveSubmit">submit</button>
    <div id="compError" class="hidden">
      Error!
    </div>
</div>

The question originally was tagged with functional-programming, but it seems more declarative/procedural than functional, other than the fact that callback functions are passed to the click handlers.

The answer by Nomis is good: one can iterate over the values in criteria and as soon as a blank value is found, show the error message container. A functional approach for this would be to use Object.values() to get the array of values in criteria and then utilize Array.every() to look for empty values:

var allNonEmpty = Object.values(criteria).every(function(entry) {
    return entry.length;
});
if (!allNonEmpty) {
    $('#compError').show();
}

If you are supporting ES-2015 (A.K.A. es-6) then an arrow function can make that shorter:

const allNonEmpty = Object.values(criteria).every(entry => entry.length);

It is also advisable to cache DOM lookups instead of performing them each time. So when the page loads, it might be best to store a reference to each input in a variable (or, if using es-6, a constant using const). See the expandable snippet below for an example.

$(function() { //jQuery DOM-ready callback
  var inputFields = {
    company: $('#company'),
    partnercode: $('#partnercode'),
    office: $('#office')
  };
  var compError = $('#compError');
  $('#saveSubmit').on('click', function() {
    var allNonEmpty = Object.values(inputFields).every(function(inputField) {
      return $(inputField).val().length;
    });
    if (!allNonEmpty) {
      compError.show();
      return;
    }
    else {
      compError.hide();
      //AJAX code
    }
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="banner-message">
  <pThe Form</p>
    <div>
      Company: <input id="company" />
    </div>
    <div>
      Partner: <input id="partnercode" />
    </div>
    <div>
      office: <input id="office" />
    </div>
    <button id="saveSubmit">submit</button>
    <div id="compError" class="hidden">
      Error!
    </div>
</div>