I have a search form with 3 fields, at least one of the first two must be filled, the other is optional

Question

<form>
  <div class="form-group">
    <label for="input1">Input 1</label>
    <input class="form-control input-sm" id="input1" type="text">
  </div>
   <div class="form-group">
    <label for="input2">Input 2</label>
    <input class="form-control input-sm" id="input2" type="text">
  </div>
  <div class="form-group">
    <label for="input3">Input 3</label>
    <input class="form-control input-sm" id="input3" type="text">
  </div>
</form>

I need to use the jQuery Validation Plugin to make sure that the user has completed at least the input1 or the input2 and that shows below each one the message "field 1 and field 2 shall be filled in". This is possible?

Answer 1

To use the plugin, you need to assign a name to the fields:

                                             ↓
<input class="form-control input-sm" name="input1" id="input1" type="text">

And must load the plugin:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

Then apply the plugin to form, setting the rules for the fields (you can define other rules such as: minimum character, whether it should be an email, etc). Below I just defined that the two fields are required (required):

$().ready(function() {
   $("form").validate({
      rules: {
         input1: "required",
         input2: "required"
      }
   });
});

Plugin documentation

See working:

$().ready(function() {
   $("form").validate({
      rules: {
         input1: "required",
         input2: "required"
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<form>
  <div class="form-group">
    <label for="input1">Input 1</label>
    <input class="form-control input-sm" name="input1" id="input1" type="text">
  </div>
   <div class="form-group">
    <label for="input2">Input 2</label>
    <input class="form-control input-sm" name="input2" id="input2" type="text">
  </div>
  <div class="form-group">
    <label for="input3">Input 3</label>
    <input class="form-control input-sm" id="input3" type="text">
  </div>
  <button type="submit">Enviar</button>
</form>