Comment valider jQuery UI zone de liste déroulante de valeurs avec jQuery Validation Plugin?

validate.js les besoins de l' "nom" sur le tag, lorsque vous utilisez jqueryui de saisie semi-automatique zone de liste déroulante.
Le code généré ne pas avoir à la fois une id et name attribut, de sorte qu'ils doivent être ajoutés si nécessaire.

Dans le _create fonction de la zone de liste déroulante, vous devez ajouter:

select = this.element.hide(),
select_id = select.attr('id'),
selected = select.children(":selected"),

et:

input = $("<input>")
.attr('id', select_id + '_combobox')
.attr('name', select_id + '_combobox')
.appendTo(wrapper)

Étant donné le HTML comme ceci:

<select id="dropDownlist">
  <option...
</select>

La autocomplete-combobox va produire les input élément avec la id et name attributs dropDownlist_combobox

avec ce que j'ai le plein contrôle sur ce type de format html de la balise de jqueryui-saisie semi-automatique-zone de liste déroulante
Vous pouvez ensuite appliquer les règles de validation de la input élément (dropDownlist-combobox)
Cela va ressembler à quelque chose comme:

$('#dropDownlist_combobox').rules('add', {
    required: true,
    messages: {
        required: 'Please enter your combobox'
    }
});

et le tour est joué 🙂

À l'aide de cela, cependant, vous obtiendrez un problème avec le message d'erreur manifeste entre les input balise et la "liste déroulante" bouton. Pour corriger cela, vous aurez besoin d'un code supplémentaire:

$.validator.setDefaults({
    errorPlacement: function (error, element) {
        if (element.context.id.indexOf('_combobox') == -1)
            error.insertAfter(element);
        else
            error.appendTo(element.parent());
    }
});

Tout le code de l'exemple est disponible à http://jsfiddle.net/XhU78/

J'espère travaille pour vous 🙂

Je vois deux problèmes ici. La première vous devez utiliser le nom de l'élément, pas d'identificateur. Deuxièmement: si je comprends bien, vous pensez que vous permettre vide <select> valeurs, mais ce n'est pas comme ça. Sélectionnez est rempli correctement après la saisie semi-automatique, mais lorsque vous transmettez une valeur vide dans <input id="acId"> (e.q. supprimer du contenu et appuyez sur ÉCHAP) le changement n'est pas propagée à <select> qui contient du contenu assigné avant <input id="acId"> a été effacé.

Longue histoire courte, vous devriez vérifier soit pas dans la sélection, mais créer automatiquement d'entrée, ou de propager en quelque sorte le vide de la valeur à sélectionner.

À l'aide de votre violon j'ai testé la première approche : http://jsfiddle.net/RRH6t/1/

//changes made

//HTML:
<select id="cbCity" name="cbCityName" style="display:none">

//JS:
var input = this.input = $('<input id="acId" name="acName">')
...
$("#fAddTeacher").validate({
    debug : true,            //for debugging
    rules: {
        cbCityName: {
            required: true
        },
        acName : {
            required : true
        }
    }
});

Je sais que c'est un vieux sujet, mais j'ai juste eu à faire plus ou moins la même (mais avec une source statique). Le seul problème avec la vérification de l'sélectionnez la valeur que la Validation plugin filtre les éléments cachés, et la zone de liste déroulante code est idéalement caché l'original, sélectionnez. Cependant, rien ne nous empêche de dire le Validateur à examiner tous les éléments, même ceux qui sont cachés:

$("#form").validate({
    ignore: ""
});

Ignorer est un sélecteur de filtre inutile éléments et par défaut est égale à :hidden. Vous pouvez tout aussi bien l'alimentation que dans un appel à $.validator.setDefaults() et de le faire travailler pour n'importe quel programme de validation d'instance. Cela fonctionne au moment de soumettre le formulaire avec un required et un min attributs, peut-être quelques efforts supplémentaires seront nécessaires pour ce travail sur la sélection (comme le déclenchement d'une focusout événement).

Mise à JOUR

À obtenir pour valider également sur l'évolution de la valeur au lieu de seulement sur le formulaire de soumission est un peu plus compliqué, mais est le suivant:

1. Fait seulement required attribut est nécessaire, pas le min un.
2. Zone de liste déroulante code doit être modifié pour accepter l'option avec une valeur vide. Puisque c'est juste un exemple de JQueryUI, cela ne devrait pas être un problème.
3. La première option à sélectionner l'une d'elles avec une valeur vide.
4. Ont Combobox déclencher une focusout événement de changement d'état (autocompleteselect, _removeIfInvalid).