Jquery Validation only after dropdown is selected

Question

I have a dropdown and want to validate, make it mandatory only if a checkbox is checked, otherwise it is not required

I tried to do as Jsfiddler https://jsfiddle.net/dorathoto/zoh72rx5/6/

<form action="#" method="post" id="Form">
<input type="checkbox" id="L3chk" name="L3chk" value="true"  />
<select id="RadioId" class="form-control" >
  <option disabled selected>--- Selecione ---</option>
  <option value="1">Opc 1</option>
  <option value="2">Opc 2</option>
</select>

<button type="submit" class="btn btn-danger">Enviar</button>
</form>

$(document).ready(function () {
            $("#Form").validate({
                rules: {
                    RadioId: { required: "#L3chk:checked" }
                }
            })
        });

Answer 1

jQuery Validation works with the attribute name

Note: attribute name is required for all input elements that need validation, and the plugin will not work without it. A attribute name should also be exclusive to the form as it is as soon as the plug-in tracks all input elements.

Source

https://jqueryvalidation.org/reference/#link-Markup-Recommendations

Example

$(document).ready(function() {
  $("#Form").validate({
    rules: {
      RadioId: {
        required: "#L3chk:checked"
      }
    },
    messages: {
      RadioId: {
        required: 'Campo obrigatório',

      }
    }
  })
});

<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.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>

<form action="#" method="post" id="Form">


  <input type="checkbox" id="L3chk" name="L3chk" value="true" />
  <select name="RadioId" id="RadioId" class="form-control">
    <option disabled selected>--- Selecione ---</option>
    <option value="1">Opc 1</option>
    <option value="2">Opc 2</option>
  </select>

  <button type="submit" class="btn btn-danger">Enviar</button>
</form>

`

Answer 2

As I said in the commentary you don’t need the validate for this, in the example I made when marking the checkbox you automatically let the select with required=true and by cancelling the checkbox select returns to be required=false:

$(document).ready(function() {

  $("select").prop("required", false);            // inicia o select com required false
  console.log("select NÃO obrigatório, envia o form.");

  $(".btn").on("click", function(event) {

      if($("#L3chk").prop("checked") == true) {    // se o checkbox estiver clicado
        $("select").prop("required", true);        // o select fica com required true
        event.preventDefault();
        console.log("select obrigatório, não envia o form.");
      } else {
        $("select").prop("required", false);      // senão o select fica required false
        console.log("select NÃO obrigatório, envia o form.");
      }
    
  })
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="Form" action="https://www.google.com">

  <input type="checkbox" id="L3chk" name="L3chk" value="true"  />
  <select id="RadioId" class="form-control" >
    <option disabled selected>--- Selecione ---</option>
    <option value="1">Opc 1</option>
    <option value="2">Opc 2</option>
  </select>

  <button type="submit" class="btn btn-danger">Enviar</button>
</form>