jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="form-visitantes">
  <label for="foi_convidado">Foi Convidado:</label>
  <select id="foi_convidado" name="foi_convidado">
    <option value='nao'>Não</option>
    <option value='sim'>Sim</option>
  </select>
  <label for="quem_convidou">Quem?:</label>
  <input readonly id="quem_convidou" name="quem_convidou">
  <button>Enviar</button>
</form>

CSS

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

$('#form-visitantes').validate({
  rules: {
    quem_convidou: {
      required: {
        depends: function(element) {
          return $("#foi_convidado").val() === 'sim'
        }
      }
    }
  },
  
  messages: {
    quem_convidou: {
      required: 'Campo Obrigatório'
    }
  }
})