jQuery Validate Wymagane Wybierz

146

Próbuję sprawdzić poprawność elementu HTML Select za pomocą wtyczki jQuery Validate. Ustawiłem regułę „required” na true, ale zawsze przechodzi ona walidację, ponieważ domyślnie wybrany jest indeks zerowy. Czy istnieje sposób zdefiniowania pustej wartości używanej przez wymaganą regułę?

UPD. Przykład. Wyobraź sobie, że mamy następującą kontrolkę HTML:

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

Chcę, aby wtyczka Validation używała wartości „default” jako pustej.

SiberianGuy
źródło
Umieść fragment kodu, abyśmy mogli pomóc.
Lee

Odpowiedzi:

213

Możesz napisać własną zasadę!

 // 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!" }
  }  
 });
JMP
źródło
1
Możesz przetestować wybrany tekst zamiast wartości, na przykład:$.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
Aby pomóc przyszłym czytelnikom: Gdzie jest napisane SelectName, oznacza to wartość atrybutu name, a nie wartość atrybutu id. Jest to trochę zagmatwane, ponieważ podczas pracy w JS zazwyczaj używa się identyfikatora, a nie nazwy. Zobacz dokumentację tutaj : "reguły (domyślnie: reguły są odczytywane ze znaczników (klasy, atrybuty, dane)) Typ: Obiekt Pary klucz / wartość definiujące reguły niestandardowe. Klucz to nazwa elementu"
Dror
239

Tutaj przedstawiono prostsze rozwiązanie: Zatwierdź pole wyboru

Ustaw wartość jako pustą i dodaj wymagany atrybut

<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>
Andrew Coats
źródło
11
Ale musisz podać swojej opcji pustą wartość - nie zawsze możliwa lub pożądana
Muleskinner
4
Nie powinno to być akceptowaną odpowiedzią, ponieważ oryginalny poster w szczególności prosi o użycie „reguł”, które są opcją podawaną do konstruktora walidującego, a nie obecną w znacznikach. Czasami nie masz luksusu modyfikowania znaczników. (Osobiście wolę po prostu nie umieszczać logiki w znacznikach.)
Mason Houtz,
3
@MasonHoutz to nadal logika w znacznikach, niezależnie od tego, czy logika oczekuje value = "", czy value = "default"
billrichards
42

najprostsze rozwiązanie

po prostu ustaw wartość pierwszej opcji na pusty łańcuch value=""

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

i reguła walidacji jQuery requiredwill work

Basheer AL-MOMANI
źródło
30

użyj reguły min

ustaw wartość pierwszej opcji na 0

'selectName':{min:1}
Funky Dude
źródło
Pierwsza wartość jest ustalona (istnieje logika backendu przeciwko tej wartości)
SiberianGuy
9

Musisz tylko umieścić validate[required]jako klasę tego wyboru, a następnie wstawić opcję z wartością = ""

na przykład:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
omalave
źródło
7

Nie wiem, jak wyglądała wtyczka w momencie zadawania pytania (2010), ale dziś stanąłem przed tym samym problemem i rozwiązałem go w ten sposób:

  1. Nadaj wybranemu znacznikowi atrybut nazwy. Na przykład w tym przypadku

    <select name="myselect">

  2. Zamiast pracować z atrybutem value = "default" w opcji tagu, wyłącz opcję domyślną lub ustaw wartość = "" zgodnie z sugestią Andrew Coatsa

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

    lub

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

  3. Ustaw regułę sprawdzania poprawności wtyczki

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

    lub

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

Obs: Rozwiązanie Andrew Coatsa działa tylko wtedy, gdy masz tylko jedną opcję w formularzu. Jeśli chcesz, aby jego rozwiązanie działało z więcej niż jednym wyborem, dodaj atrybut nazwy do wybranego.

Mam nadzieję, że to pomoże! :)

Pedro Paulo Mendes Pereira
źródło
1
w skrócie, dodaj requiredatrybut do <select>tagu i dodaj disabledatrybut do pierwszego <option>tagu (lub tego z selectedatrybutem, jeśli taki istnieje)
Stephen
4

Oto prosty i zrozumiały przykład:

   <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 $
fthopkins
źródło
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>

wybrana wartość będzie pusta

abhishek kumar
źródło
2
Chociaż ten fragment kodu może rozwiązać problem, dołączenie wyjaśnienia naprawdę pomaga poprawić jakość Twojego posta. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a osoby te mogą nie znać powodów, dla których zaproponowałeś kod. Prosimy również starać się nie zatłaczać kodu komentarzami wyjaśniającymi, ponieważ zmniejsza to czytelność zarówno kodu, jak i wyjaśnień!
Filnor
1

To proste, musisz pobrać wartość pola Select i nie może być ona „domyślna”.

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}
Maycow Moura
źródło
1

Rozwiązanie wspomniane przez @JMP zadziałało w moim przypadku z niewielką modyfikacją: używam element.valuezamiast valuew 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!" }
    }  
});

Możliwe, że mam tutaj specjalny przypadek, ale nie znalazłem przyczyny. Ale rozwiązanie @ JMP powinno działać w zwykłych przypadkach.

Legendy
źródło
0

jak potwierdzić wybór "qualifica", ma 3 wybory

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

});
michele
źródło
3
Witamy w Stack Overflow! Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną krótkoterminową pomoc. Właściwe wyjaśnienie znacznie poprawiłoby jego długoterminową wartość, pokazując, dlaczego jest to dobre rozwiązanie problemu, i uczyniłoby go bardziej użytecznym dla przyszłych czytelników z innymi, podobnymi pytaniami. Proszę edytować swoją odpowiedź dodać kilka wyjaśnień, w tym założeń już wykonanych.
Toby Speight