How to validate drop-down with jquery-validation

Question

I am trying to validate a drop-down list with jquery-validation and could not, I took an example and tried to adapt my need, I did this:

The form that triggers validation:

<form class="form-horizontal" id="frmFaseObrigatoria" action="" method="post">

Section that should carry out the validation:

    $(document).ready(function() {              
    $("#frmFaseObrigatoria").validate({
        rules: {
            IdTipoFase1: {
                required: true,
            },          
            iOrdem: {
                required: true,
            },
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },

        // FUNÇÃO ENVIADA APÓS VALIDAÇÃO
        submitHandler: function(form) {
            DlgInserirFaseObrigatoria();            
        }
    });
});

What I tried to do:

rules: {
IdTipoFase1: { 
    valueNotEquals: 0 
},
IdTipoFase1: { 
    valueNotEquals: "Informe um valor" 
},

The value of my drop-down cannot be zero

Answer 1

You can do it this way

form:

<form id="form" action "" method="post">
    <select name="combo">
        <option value="">0</option><!-- Criado primeira opção com valor vazio -->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input type="submit" value="enviar" />
</form>

Javascript

$(document).ready(function () {

$("#form").validate({
   rules: {
     // regra é feita pelo name do campo
     combo: "required"           
   }
   //aqui você coloca suas outras chamadas conforme a cima
 });

$("#form").submit(function() {
    //aqui uso função $form.valid() para verificar se o formulario é valido antes do submit, ou se você submitar direto também funciona! ele vai parar na validação
    if($("#form").valid()){
        //sua ação de submit
        alert("submit o form");        
    }

});

})

and here the jsfiddle url working: jsfiddle

Answer 2

Even trying to accept the reply of @Brunno, I ended up finding another solution to the problem I had and would like to post only as a tip to someone who might be interested, following the tip of this site Form validation with jQuery did that:

    // VALIDAÇÃO DOS CAMPOS DO FORMULÁRIO - FASE OBRIGATÓRIA
$(document).ready(function() {         

    // ADICIONEI O addMethod A VALIDAÇÃO
    jQuery.validator.addMethod (
      "notEqualTo",
      function(elementValue,element,param) {
        return elementValue != param;
      },
      "Selecione uma opção na lista"
    );  

    $("#frmFaseObrigatoria").validate({
        rules: {
            IdTipoFase1: {
                required: true,
                // INSERI ESSA REGRA NA VALIDAÇÃO
                notEqualTo: 0
            },          
            iOrdem: {
                required: true,
                // INSERI ESSA REGRA NA VALIDAÇÃO
                notEqualTo: 0
            },
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },

        // FUNÇÃO ENVIADA APÓS VALIDAÇÃO
        submitHandler: function(form) {
            DlgInserirFaseObrigatoria();            
        }
    });
});