Jquery Validation only after dropdown is selected

Navigation
0

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

I tried to do according to JSFiddler link 

<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" }
                }
            })
        });
    
asked by anonymous 17.09.2018 / 22:56

2 answers

1

jQuery Validation works with the name attribute

  

Note: name attribute is required for all input elements   that need validation, and the plugin will not work without it. a   attribute name must also be unique to the form because it is   so the plug-in tracks all input elements.

Font

  

link

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><scriptsrc="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><formaction="#" 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>

'

    
22.09.2018 / 02:50
0

As you said in the comment you do not need validate for this, in the example I made when checking checkbox you automatically leave select required = true and unchecking the checkbox the select returns 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><formid="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>
    
17.09.2018 / 23:49
Show Value in Json + Mysql + PHP Fix Encoding problem when exporting to csv from a scrapy file