0

Tenho o seguinte código jQuery:

$("#aspnetForm").validate({
    errorElement: 'span',
    errorClass: 'help-block',
    rules: {
        Dropdown: {
            required: true
        }
    },
    messages: {
        Dropdown: {
            required: "Preencha o campo"
        }
    },
    highlight: function (element) { 
        $(element)
            .closest('.form-group').removeClass('has-success').addClass('has-error'); 
    },
    unhighlight: function (element) { 
        $(element)
            .closest('.form-group').removeClass('has-error'); 
    }
});

esse mesmo código funciona com meus TextBox, mas estou tendo problemas com DropDownList, pois, os mesmo por default tem o valor Selecionado. Teria como adaptar para enquanto estiver marcado o Selecionado ele realizar a validação?

1
  • Deu certo o código para você?
    – novic
    Commented 19/03/2018 às 20:28

1 Resposta 1

0

Crie um método para verificar o valor do contéudo do option escolhido, no caso desse exemplo, o campo drop1 tem um option com o valor ="" então na funçõa foi verificado esse valor:

$.validator.addMethod("selectrequired", function(value, element, arg) {
  return arg != element.value;
}, 'Select');

$("#form1").validate({
  errorElement: 'span',
  errorClass: 'help-block',
  rules: {
    nome: {
      required: true
    },
    drop1: {
      selectrequired:""
    }
  },
  messages: {
    nome: {
      required: "Preencha o campo"
    },
    drop1: {
      selectrequired: "Escolha o item"
    }
  },
  highlight: function(element) {
    $(element)
      .closest('.form-group').removeClass('has-success').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element)
      .closest('.form-group').removeClass('has-error');
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/localization/messages_pt_BR.min.js"></script>

<form id="form1" class="form">
  <label for="nome">Nome</label>
  <input type="text" name="nome" id="nome" class="form-control" />
  <label for="nome">Nome</label>
  <select id="drop1" name="drop1" class="form-control">
    <option value="">Selecione</option>
    <option value="S">Sim</option>
    <option value="N">Não</option>
  </select>
  <br>
  <button class="btn btn-success">Enviar</button>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .