jQuery Validarea selecției obligatorii (Programare, Jquery, Jquery Validate)

SiberianGuy a intrebat.
a intrebat.

Încerc să validez elementul html select folosind jQuery Validate plugin. Am setat regula „required” la true, dar întotdeauna trece validarea pentru că indexul zero este ales în mod implicit. Există vreo modalitate de a defini o valoare goală care să fie folosită de regula required?

UPD. Exemplu. Imaginați-vă că avem următorul control html:

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

Vreau ca pluginul de validare să utilizeze valoarea „default” ca fiind goală.

Comentarii

  • Puneți un fragment de cod pentru a ne putea ajuta. –  > Por Lee.
  • posibil duplicat: stackoverflow.com/questions/1271640/jquery-validate-select-box –  > Por cregox.
11 răspunsuri
JMP

Puteți scrie propria dvs. regulă!

 // 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!" }
  }  
 });

Comentarii

  • Puteți testa textul selectat în loc de valoare, astfel: $.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg."); –  > Por Pablo S G Pacheco.
  • Pentru a-i ajuta pe viitorii cititori: Unde scrie SelectName se referă la valoarea atributului name și nu la valoarea atributului id. Acest lucru este un pic confuz, deoarece atunci când se lucrează în JS, de obicei se lucrează cu id-ul și nu cu numele. A se vedea documentația aici: „rules (implicit: regulile sunt citite din markup (clase, atribute, date)) Tip: Obiect Perechi cheie/valoare care definesc regulile personalizate. Cheia este name al unui element” – –  > Por Dror.
Andrew Coats

O soluție mai simplă a fost prezentată aici:Validate select box

Faceți ca valoarea să fie goală și adăugați atributul necesar

<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>

Comentarii

  • Dar trebuie să dați opțiunii dvs. o valoare goală – nu întotdeauna este posibil sau de dorit –  > Por Muleskinner.
  • Acesta nu ar trebui să fie răspunsul acceptat, deoarece autorul original cere în mod specific să se folosească „reguli”, care este o opțiune care este furnizată constructorului de validare și nu este prezentă în marcaj. Uneori nu vă puteți permite luxul de a modifica marcajul. (Și, personal, prefer să nu introduc logica în markup).  > Por Mason Houtz.
  • @MasonHoutz este tot logică în marcare, indiferent dacă logica se așteaptă la value=”” sau value=”default” –  > Por billrichards.
Basheer AL-MOMANI

cea mai simplă soluție

setați doar valoarea primei opțiuni la șirul gol value=""

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

și jquery validation required regula will work

Funky Dude

utilizați regula min

setați prima valoare a opțiunii la 0

'selectName':{min:1}

Comentarii

  • Prima valoare este fixă (există o anumită logică de backend în raport cu această valoare) –  > Por SiberianGuy.
omalave

Trebuie doar să puneți validate[required] ca și clasă a acestui select și apoi să puneți o opțiune cu valoare=””

de exemplu:

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

Pedro Paulo Mendes Pereira

Nu știu cum era pluginul la momentul în care a fost pusă întrebarea (2010), dar eu m-am confruntat cu aceeași problemă astăzi și am rezolvat-o în acest fel:

  1. Dați tag-ului select un atribut name. De exemplu, în acest caz

    <select name="myselect">

  2. În loc să lucrați cu atributul value=”default” în opțiunea tag-ului, dezactivați opțiunea default sau setați value=”” așa cum a sugerat Andrew Coats

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

    sau

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

  3. Setați regula de validare a plugin-ului

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

    sau

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

Obs: Soluția lui Andrew Coats funcționează numai dacă aveți doar un singur select în formular. Dacă doriți ca soluția sa să funcționeze cu mai multe selecții, adăugați un atribut name la selecția dvs.

Sper că vă ajută! 🙂

Comentarii

  • pe scurt, adăugați required atributului <select> și adăugați disabled la primul atribut <option> (sau cea cu atributul selected dacă există unul) –  > Por Stephen.
fthopkins
<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>
<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 $

abhishek kumar
<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>

valoarea de selectare va fi goală

Comentarii

  • În timp ce acest fragment de cod poate rezolva întrebarea, includerea unei explicații ajută cu adevărat la îmbunătățirea calității postării dvs. Amintiți-vă că răspundeți la întrebare pentru cititorii din viitor, iar acele persoane ar putea să nu cunoască motivele pentru sugestia dvs. de cod. De asemenea, vă rugăm să încercați să nu aglomerați codul cu comentarii explicative, acest lucru reduce lizibilitatea atât a codului, cât și a explicațiilor! –  > Por Filnor.
Maycow Moura

Este simplu, trebuie să obțineți valoarea câmpului Select și aceasta nu poate fi „default”.

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

Legende

Soluția menționată de @JMP a funcționat în cazul meu cu o mică modificare:folosesc element.value în loc de value în 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!" }
    }  
});

S-ar putea fi posibil, că am un caz special aici, dar nu am depistat cauza. Dar soluția lui @JMP ar trebui să funcționeze în cazurile obișnuite.

michele

cum se validează selectul „calificarea” care are 3 opțiuni.

$(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;
        }
    });

});

Comentarii

  • Bine ați venit pe Stack Overflow! Vă mulțumim pentru acest fragment de cod, care ar putea oferi un ajutor limitat pe termen scurt. O explicație adecvată ar îmbunătăți foarte mult valoarea sa pe termen lung, arătând de ce aceasta este o soluție bună la problemă, și ar face-o mai utilă pentru viitorii cititori cu alte întrebări similare. Vă rugăm să vă editați răspunsul pentru a adăuga unele explicații, inclusiv ipotezele pe care le-ați făcut. –  > Por Toby Speight.