PDA

View Full Version : JqueryUi Combo Autocomplete e Validation


robertino_salemi
05-03-2014, 18:47
Salve a tutti,
sto usando Autocomplete ComboBox (http://jqueryui.com/autocomplete/#combobox), fantastica nel suo utilizzo di base.

Cosa vorrei integrare però?
La verifica sul campo obbligatorio, quindi sto integrando Jquery Validation (http://jqueryvalidation.org/).

Però cosa succede: Jquery Validation mi richiede che la mia combo abbia una name quindi ho modificato la parte di codice ove creo la mia combo in:

this.input = $("<input>")

.appendTo(this.wrapper)

.val(value)

.attr("title", "")

.attr("name", value)

.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")

.autocomplete({

delay: 0,

minLength: 0,

source: $.proxy(this, "_source")

})


Solitamente quando devo fare un required sulla select, dichiaro un

<option value="">Seleziona</option>

e va tutto bene.
Ma in questo caso dato che ho dovuto integrare anche il name nella combo il tutto non funziona! :(

robertino_salemi
06-03-2014, 18:17
Nessun suggerimento?
Non riesco a verificare quando la select è vuota oppure no...

Grazie.

Tuvok-LuR-
06-03-2014, 18:30
jqueryUI non rimuove dall'html la <select> originaria, semplicemente diventa invisibile. Ma ai fini del form il name ed il value verranno comunque letti da essa.
L'interfaccia aggiuntiva va ad aggiornare questa select in maniera automatica quando compi una scelta. Nota che l'elemento input che viene iniettato non ha un name, in modo da non avere di fatto alcun effetto sui dati inviati dal form.
Per questo anche il validate lo devi far lavorare sulla select originaria

robertino_salemi
07-03-2014, 00:40
Capisco, ma quindi come dovrei risolvere?

Daniels118
07-03-2014, 08:49
In teoria basterebbe invocare il metodo rules mettendogli required:true, il problema è che poi il messaggio di errore comparirebbe in mezzo tra il select nascosto e quello iniettato, causando problemi nella visualizzazione. Si può risolvere creando un metodo per personalizzare la generazione del messaggio di errore, oppure giocando con gli attributi css in modo da farlo slittare dove si desidera.

malatodihardware
08-03-2014, 22:19
Perché non lo fai in HTML5? Problemi di compatibilità?

Inviato dal mio Nexus 5 con Tapatalk

robertino_salemi
10-03-2014, 00:06
Beh, in HTML5 potrebbe essere interessante...ma ormai che ho implementato il tutto in quel modo...

Le Input funzionano correttamente, il problema è solo nelle combo! :(

malatodihardware
10-03-2014, 07:47
Capisco, considera però che con i nuovi Tag dell'HTML5 avresti fatto tutto direttamente nell'HTML senza nemmeno passare da JS

Inviato dal mio Nexus 5 con Tapatalk

robertino_salemi
10-03-2014, 09:17
Beh, allora, vedo di valutare subito il tuo consiglio.

Grazie.