jQueryValidate - check if a control is required without triggering validation

Is it possible to check if an input is required without validating the control or the form?

There is no method as part of the jQuery Validate plugin that will return a list of declared, defined, or assigned rules. (you could look at the values inside of the settings.rules object, but this is not dynamic or comprehensive)

However, there is an undocumented method built into the plugin called .check() that will check validity without triggering any of the error messages. It's not confined to the required rule, just validity. It would effectively only be looking for the required rule during the time the field is blank.

In other words on a blank form, this method will always tell whether the field is required without triggering messages.

You must attach it to the validator object, and the argument must be a DOM element.

$('#myform').validate().check($('[name="test3"]')[0]) // <-- returns a boolean if defined

OR

var validator = $('#myform').validate({...}); // initialize plugin with options

validator.check($('[name="test3"]')[0]) // <-- returns a boolean if defined

DEMO: jsfiddle.net/we2johru/2/

Note that this method only returns a boolean when rules are defined. Without defined rules, this method will return undefined.

Below code sample should do the trick for you.

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control");

    $controls.each(function () {
        // if ($(this).isRequired()) {
        if ($(this).rules().required) {
            const $label = $(this).parents(".form-group").find(">.control-label");

            $label.html($label.html() + " <span class='text-danger'>*</span>");
        }
    });
},

If you don't have .form-control class on each element, then you can get the elements array from plugin's .elements() method and loop them with checking their .rules() method.

const elements = $("#signupform").validate().elements();
for (let i=0; i<elements.length; i++) {
    const $el = $(elements[i]);
    if ($el.rules().required) {
        $el.parents(".form-group").find(">.control-label").append(" <span class='text-danger'>*</span>");
    }
}

Edit:

JSBin Demo added.

Based on examples of jQuery Validation Plugin your rules could be modified like in the below example to solve your problem.

 rules: {
    CompanyName: {
      required: {
        depends: function(element) {
          return $("#ContactName").val().length === 0;
        }
      }
    },
    ContactName: {
      required: {
        depends: function(element) {
          return $("#CompanyName").val().length === 0;
        }
      }
    }
  }

OR

 rules: {
    CompanyName: {
      required: {
        depends: function(element) {
          if($("#ContactName").val().length === 0) {
              $("#ContactName").removeClass("required");
              return true;
          } else {
              return false;
          }             
        }
      }
    },
    ContactName: {
      required: {
        depends: function(element) {
          if($("#CompanyName").val().length === 0) {
              $("#CompanyName").removeClass("required");
              return true;
          } else {
              return false;
          }
        }
      }
    }
  }

Finally

An alternative method would be to use grouping.

<div class="form-group">
    <label class="control-label" for="CompanyName">Company Name</label>
    <div>
        <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
    </div>
</div>
<div class="form-group">
    <label class="control-label" for="ContactName">Contact Name</label>
    <div>
        <input type="text" id="ContactName" name="ContactName" class="form-control required">
    </div>
</div>
  // Use require_from_group to ensure at least one of the fields is complete
  rules: {
    ContactName: {
      require_from_group: [1, ".required"]
    },
    CompanyName: {
      require_from_group: [1, ".required"]
    }
  }

So as I understand, each of your input element will have form-control class, and required class would be only for selected elements. Based on this, below is a snippet that will assign asterisk only to those, that have required as class.

Logic: Looping through elements that have form-control class, and check using hasClass(), if they have required class too. If yes, append the danger asterisk to it.

$(".form-control").each(function() {
  var requiredHtml = "<span class='text-danger'>*</span>";
  if ($(this).hasClass('required')) {
    $(this).closest('.form-group').find('label').append(requiredHtml);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label" for="CompanyName">Company Name</label>
  <div>
    <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
  </div>
</div>
<div class="form-group">
  <label class="control-label" for="designation">Designation</label>
  <div>
    <input type="text" id="designation" name="designation" class="form-control">
  </div>
</div>