jQuery Validar Necessário Selecionar


146

Estou tentando validar o elemento html select usando o plugin jQuery Validate. Eu defino a regra "required" como true, mas ela sempre passa na validação porque o índice zero é escolhido por padrão. Existe alguma maneira de definir o valor vazio usado pela regra exigida?

UPD. Exemplo. Imagine que temos o seguinte controle html:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Quero que o plugin de validação use o valor "padrão" como vazio.


Coloque um trecho de código para que possamos ajudar.
Lee

Respostas:


213

Você pode escrever sua própria regra!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

1
Você pode testar o texto selecionado em vez do valor, desta forma:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
Pablo SG Pacheco

11
Para ajudar futuros leitores: Onde diz SelectName, significa o valor do atributo name e não o valor do atributo id. Isso é um pouco confuso, pois ao trabalhar em JS, geralmente trabalha-se com o id e não com o nome. Consulte a documentação aqui : "rules (padrão: as regras são lidas na marcação (classes, atributos, dados)) Tipo: Object Pares de chave / valor que definem regras personalizadas. Key é o nome de um elemento"
Dror

239

Uma solução mais fácil foi descrita aqui: Validar caixa de seleção

Deixe o valor vazio e inclua o atributo necessário

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

11
Mas você tem que dar a sua opção de um valor vazio - nem sempre é possível ou wishable
Muleskinner

4
Esta não deve ser a resposta aceita, porque o pôster original está solicitando especificamente o uso de "regras", que é uma opção que é fornecida ao construtor validado e não está presente na marcação. Às vezes, você não tem o luxo de modificar a marcação. (E, pessoalmente, eu prefiro não colocar lógica na marcação.)
Mason Houtz

3
@MasonHoutz ainda é lógica na marcação, se a lógica espera value = "" ou value = "default"
billrichards


30

usar regra min

defina o valor da primeira opção como 0

'selectName':{min:1}

O primeiro valor é fixado (há alguma lógica backend contra este valor)
SiberianGuy

9

Você só precisa colocar validate[required]como classe dessa seleção e, em seguida, colocar uma opção com o valor = ""

por exemplo:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

7

Não sei como foi o plug-in no momento em que a pergunta foi feita (2010), mas enfrentei o mesmo problema hoje e o resolvi da seguinte maneira:

  1. Atribua um atributo de nome à sua tag de seleção. Por exemplo, neste caso

    <select name="myselect">

  2. Em vez de trabalhar com o atributo value = "default" na opção de tag, desative a opção padrão ou defina value = "" conforme sugerido por Andrew Coats

    <option disabled="disabled">Choose...</option>

    ou

    <option value="">Choose...</option>

  3. Defina a regra de validação do plug-in

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    ou

    <select name="myselect" class="required">

Obs: A solução da Andrew Coats funciona apenas se você tiver apenas uma seleção no seu formulário. Se você deseja que sua solução funcione com mais de uma seleção, adicione um atributo de nome à sua seleção.

Espero que ajude! :)


1
em suma, adicionar requiredatributo à <select>tag e adicionar disabledatributo para o primeiro <option>tag (ou aquele com o selectedatributo se houver)
Stephen

4

Aqui está o exemplo simples e compreensível:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

o valor selecionado ficará em branco


2
Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código. Tente também não sobrecarregar seu código com comentários explicativos, pois isso reduz a legibilidade do código e das explicações!
Filnor

1

É simples, você precisa obter o valor do campo Selecionar e ele não pode ser "padrão".

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

1

A solução mencionada pelo @JMP funcionou no meu caso com uma pequena modificação: eu uso em element.valuevez de valueno addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

É possível que eu tenha um caso especial aqui, mas não localizei a causa. Mas a solução do @ JMP deve funcionar em casos regulares.


0

como validar o select "qualifica" tem 3 escolha

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

3
Bem-vindo ao Stack Overflow! Obrigado por este trecho de código, que pode fornecer ajuda limitada a curto prazo. Uma explicação adequada melhoraria bastante seu valor a longo prazo, mostrando por que essa é uma boa solução para o problema e a tornaria mais útil para futuros leitores com outras perguntas semelhantes. Por favor edite sua resposta para adicionar alguma explicação, incluindo as suposições que você fez.
Toby Speight
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.