selectize.js & jquery Validierung

Question

Ich versuche ein Formular zu validieren, das die selectize.js zur Auswahl und jqueryvalidation.org zur Validierung verwendet.

Ich kann es nicht funktionieren lassen. Das Skript überprüft die Eingabefelder, aber nicht die select:

<form id="test" method="post" action="#"> 
Name: <input name="name" type="text"> 

<select name="person" id="select-beast" class="demo-default" placeholder="Select"> 
    <option value="">Select...</option> 
    <option value="1">First</option> 
    <option value="2">Second</option>n> 
</select> 

    <button type="submit" class="btn btn-primary col-md-12 col-lg-12">Go</button> 
</form> 

JS:

$('#select-beast').selectize({ 
    create: true, 
    sortField: 'text' 
}); 


// validate signup form on keyup and submit 
$("#test").validate({ 
    errorElement: 'label', 
    errorClass: 'error', 
    rules: { 
     name: { 
      required: true 
     }, 
     person: { 
      required: true 
     } 
    }, 
    messages: { 
     name: "Insert name.", 
     person: "Insert person.", 
    } 
}); 

http://jsfiddle.net/8nVqS/

Answer 1

Der Grund dafür ist, dass jQuery.validation Plugin alle versteckt Element ignorieren, wenn die Validierung standardmäßig.

Und Selectize.js wird das angegebene jQuery-Objekt verbergen, also wird Ihr Namensfeld validate aber Person Feld wird nicht ausgeführt.

Lösung, verweisen Sie auf das Wesentliche: How to validate selectize.js comboboxes with the jQuery validation plugin

Answer 2

Ich verwende

ignorieren: ‚: versteckt: nicht ([class ~ = selectized]) ,: versteckt> .selectized, .selectize Kontrolle. selectize-Eingang ',

und es funktioniert für mich.

Answer 3

Die oben angegebenen Antworten funktionieren nicht mit selectize.js v0.12.3 oder höher.

, dass aufgrund der Tatsache geschieht, dass das gewünschte Attribut aus der Auswahl in refreshValidityState Funktion entfernt wird - siehe https://github.com/selectize/selectize.js/commit/abc8a560a8335a017790c2a799925cc123670bfc

Eine schnelle Lösung für diese die wählt zuzusetzen, die erforderlich sind in das rules-Array des Validierungsoptionsobjekts.

Beispiel:

var validator = $("#form").validate({ 
      ignore: ':hidden:not([class~=selectized]),:hidden > .selectized, .selectize-control .selectize-input input', 
      rules: { 
       "select-name-here": "required", 
       "select-name-here2": "required" 
      } 
     });