Risposta breve:
Lascia perdere. A mio personalissimo parere, un semplice testo fisso, affianco al campo, toglierebbe ogni possibile incomprensione. Magari una <label> del tipo "Qt. (minimo 10)" o qualcos'altro del genere.
Oppure, al massimo, specificare l'avvertenza sull'attributo title, che chiaramente apparirebbe portando il puntatore del mouse sopra il campo stesso.
Risposta lunga:
Quello che chiedi non è facilmente risolvibile per come lo hai posto tu. Ci sono diverse problematiche.
Cerco di chiarire velocemente.
Non ci sono eventi specifici per i pulsantini SU e GIU'.
Gli eventi gestibili, per un qualsiasi elemento input, sono quelli standard.
La soluzione più vicina a questo tipo di approccio è l'uso dell'evento onchange che avviene, appunto, anche dopo la pressione dei due pulsantini, ma senza distinguere quale dei due pulsanti si è premuto, se non controllando opportunamente la variazione del valore. Sarebbe quindi possibile, con un po' di JavaScript, mettere qualche condizione di verifica e far apparire il tooltip quando il valore è minore di 10... ma qui nascono altri due principali problemi e relativi sottoproblemi...
Problema 1:
Agendo sui pulsantini non può comunque accadere che il valore si porti sotto quello minimo se è stato specificato l'attributo min sul tag. L'evento onchange non verrà nemmeno innescato se, cliccando sul pulsantino GIU', il valore è già quello minimo.
Soluzione al problema 1:
Dovresti togliere l'attributo min, ma questo ovviamente porterebbe ad un altro problema collaterale.
Problema 1b:
Non avendo un valore minimo, la validazione di tale campo verrebbe chiaramente compromessa.
Controsoluzione al problema 1b:
Potresti gestire il controllo del valore via JavaScript anche sull'evento onsubmit, o qualcosa del genere, e quindi impostare opportunamente il tuo messaggio di errore.
Problema 2:
Per far saltare fuori il tooltip con il messaggio di errore quando avviene l'evento onchange (o quando meglio ti pare), si può usare la funzione reportValidity(). Peccato però che attualmente i browser che supportano tale metodo sono meno di quelli che non lo supportano.
Soluzione al problema 2:
Qualcuno si è inventato un sistema per implementare tale metodo anche sui browser che non lo supportano. In sostanza si innesca forzatamente il submit per cui avviene il controllo sui campi e il tooltip salta fuori se c'è l'errore. Semplice, no?
codice:
if ( !HTMLFormElement.prototype.reportValidity ) {
HTMLFormElement.prototype.reportValidity = function() {
var submitButtons = this.querySelectorAll( "button, input[type=submit]" );
for ( var i = 0; i < submitButtons.length; i++ ) {
// Filter out <button type="button">, as querySelectorAll can't
// handle :not filtering
if ( submitButtons[ i ].type === "submit" ) {
submitButtons[ i ].click();
return;
}
}
}
}
fonte: https://www.tjvantoll.com/2015/01/28/reportvalidity/
Problema 2b:
Chiaramente, forzando il submit, il form verrebbe verificato e inviato ogni molta che avviene l'evento onchange su tale campo (il quale, appunto, richiama reportValidity()), per cui la soluzione sarebbe poco funzionale.
Soluzione al problema 2b:
Si potrebbero mettere comunque delle opportune condizioni sull'onchange del campo, così da richiamare il reportValidity() solo se effettivamente è stato inserito un valore inferiore a 10 per cui c'è l'errore da segnalare e il submit non avviene comunque.
Problema 2c:
Il tutto funzionerebbe correttamente (o quasi) se il tuo form avesse solo quel campo, perché il tooltip che salta fuori all'onchange (forzando il submit) farebbe riferimento solo agli errori di quel campo. Ma nel caso di più campi, anche se tu agisci su quel campo specifico, potrebbe saltare fuori un messaggio di errore che non è riferito a quel campo ma, magari, ad un altro campo (con un valore non valido) posto prima di quello. Il che porterebbe solo a confondere l'utente.
Soluzione al problema 2c:
Non saprei...
In conclusione, è possibile che ci siano altre soluzioni, ad esempio usare un qualche plugin di validazione jQuery che puoi personalizzare come meglio ti pare, ma a mio parere la soluzione più semplice ed efficace resta quella di inserire un messaggio fisso (vedi risposta breve).
Rispondi quotando
