Elementi Required non Completati

[Luigi636]

Sono rimasto intrappolato in questo piccolo labirinto..
Ho degli elementi required che sono 'invisibili' finchè non si clicca sul prodotto, ovviamente andando a cliccare sul submit non va avanti se il required non è stato completato, ma neanche appare il messaggio in quanto il componente è invisibile..!
Domanda: Come faccio a far apparire un messaggio all'utente se ci sono degli elementi da completare..?
L'unica soluzione che sarebbe venuta a me è che quando cliccano sul submit, parta uno script che selezioni tutti i select che iniziano con colore e taglia, quindi ad esempio colore336, colore123, etc. e che per ognuno controlli se è stata selezionata un'opzione..
Voi cosa ne pensate? Come risolvereste al posto mio?

[ciro78]

se sono nascosti l'utente come li riempie?

[Luigi636]

se sono nascosti l'utente come li riempie?

Cliccando sulla riga del prodotto appare il modal (Bootstrap) con le opzioni del prodotto

[lucavizzi]

Non usare l'attributo required, tra l'altro non funziona affatto sui dispositivi Apple, usa una validazione con js.

[Luigi636]

Non usare l'attributo required, tra l'altro non funziona affatto sui dispositivi Apple, usa una validazione con js.

Quindi l'unica soluzione è quella di controllare tramite jQuery/Javascript se tutti i select hanno un'option selezionata?
In tal caso, che funzione di jQuery potrei utilizzare per trovare tutti i select e controllare che siano selezionati?
La funzione .each?

[Luigi636]

Fatto.. Al click sul bottone di submit, parte questo script.. :-)

	function controllaSelect(){		var erroreColori = [];
		$("select[name^='colore']").each(function() {
			var optionSelected = $(this).val();
			if(optionSelected == ''){
				var idProdotto = $(this).attr('name');
				idProdotto = idProdotto.replace('colore', '');
				erroreColori.push(idProdotto);
			}
		});
		for (i = 0;i < erroreColori.length;++i) {
			var nomeProdotto = erroreColori[i];
			nomeProdotto = $("#nome"+nomeProdotto).text();
			alert("Selezionare il colore sul prodotto '"+nomeProdotto+"'");
		}


		var erroreTaglie = [];
		$("select[name^='taglia']").each(function() {
			var optionSelected = $(this).val();
			if(optionSelected == ''){
				var idProdotto = $(this).attr('name');
				idProdotto = idProdotto.replace('taglia', '');
				erroreTaglie.push(idProdotto);
			}
		});
		for (i = 0;i < erroreTaglie.length;++i) {
			var nomeProdotto = erroreTaglie[i];
			nomeProdotto = $("#nome"+nomeProdotto).text();
			alert("Selezionare la taglia sul prodotto '"+nomeProdotto+"'");
		}
	}