controllo campo select nel form

[Paperino78]

Lo so che l'argomento è stato trattato in mille modi ma ho letto mille guide ma non ne vengo a capo. Io ho un fomr con un select dove l'utente sceglie la sua data di nascita così

                	<p>
                    	<label for="eta" class="block">Et&agrave;:</label>
                    	<select class="select" name="eta" id="eta" onchange="sel_eta()">
                        		<option value="0">Seleziona</option>
	                            <option value="1">+50</option>
    	                        <option value="2">30-50</option>
        	                    <option value="3">11-29</option>
            	                <option value="4">1-10</option>
                        </select>
                    </p>

e nel codice html viene richiamato un file javascript che dovrebbe controllare live se il campo è stato selezionato. i lcodice è questo

			'eta' : function() {

				$('body').append('<div id="etaInfo" class="info"></div>');

				var etaInfo = $('#etaInfo');
				var ele = $('#eta');
				var pos = ele.offset();

				etaInfo.css({
					top: pos2.top-3,
					left: pos2.left+ele2.width()+25
				});

				if(document.jform.ele.value == 0) {
					jVal.errors = true;
					etaInfo.removeClass('correct').addClass('error').html('&larr; Quanti anni hai?').show();
					etaInfo.removeClass('normal').addClass('wrong');
				} else {
					jVal.errors = false;
					etaInfo.removeClass('error').addClass('correct').html('&radic;').show();
					etaInfo.removeClass('wrong').addClass('normal');
					}
				}

il problema è che non riesco a capire come impostare il controllo del campo. Al controllo se positivo appare un flag verde se negativo una riga di testo che avvisa di selezionare la data. come posso risolvere?

 

[criric]

una soluzione semplice

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#eta").change(function(){
            var sel = $("#eta option:selected").val();
            if(sel==0)
                $("#verifica").html("&larr; Quanti anni hai?");
            else 
                $("#verifica").html("V");// qui puoi inserire un immagine
        })
    })
    
</script>
<p>
    <label for="eta" class="block">Et&agrave;:</label>
    <select class="select" name="eta" id="eta">
        <option value="0">Seleziona</option>
        <option value="1">+50</option>
        <option value="2">30-50</option>
        <option value="3">11-29</option>
        <option value="4">1-10</option>
    </select>
    <span id="verifica">&larr; Quanti anni hai?</span>
</p>

 

[Paperino78]

Ciao criric, grazie, il tuo suggerimento funziona, io vorrei invece integrare il tuo suggerimento con le modalità di avviso che appaiono quando clicco su invia. Al momento di inviare il form mi appaiono dei box lato input che mi avvisano che il campo è vuoto, vorrei fare lo stesso. Sapresti darmi qualche dritta? Il codice che ho messo qua

'eta' : function() {

				$('body').append('<div id="etaInfo" class="info"></div>');

				var etaInfo = $('#etaInfo');
				var ele = $('#eta');
				var pos = ele.offset();

				etaInfo.css({
					top: pos2.top-3,
					left: pos2.left+ele2.width()+25
				});

				if(document.jform.ele.value == 0) {
					jVal.errors = true;
					etaInfo.removeClass('correct').addClass('error').html('&larr; Quanti anni hai?').show();
					etaInfo.removeClass('normal').addClass('wrong');
				} else {
					jVal.errors = false;
					etaInfo.removeClass('error').addClass('correct').html('&radic;').show();
					etaInfo.removeClass('wrong').addClass('normal');
					}
				}

è il controllo del campo
poi il tutto viene legato con questi valori

$('#send').click(function (){
		var obj = $.browser.webkit ? $('body') : $('html');
		obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
			jVal.errors = false;
			jVal.nome();
			jVal.cognome();
			jVal.email();
			jVal.eta();
			jVal.messaggio();
			jVal.sendIt();
		});
		return false;
	});

e questo

$('#nome').change(jVal.nome);
	$('#cognome').change(jVal.cognome);
	$('#eta').change(jVal.eta);
	$('#email').change(jVal.email);
	$('#messaggio').change(jVal.messaggio);

});

Grazie

 

[criric]

cambia questo

if(document.jform.ele.value == 0) {

con questo

if(document.jform.eta.value == 0) {

 

[Paperino78]

cambia questo

if(document.jform.ele.value == 0) {

con questo

if(document.jform.eta.value == 0) {

Purtroppo nemmeno così funziona!

 

[criric]

a me ha funzionato

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#eta").change(function(){
            $('body').append('<div id="etaInfo" class="info"></div>');

            var etaInfo = $('#etaInfo');       
        
            if(document.jform.eta.value == 0) {            
                etaInfo.removeClass('correct').addClass('error').html('&larr; Quanti anni hai?').show();
                etaInfo.removeClass('normal').addClass('wrong');
            } else {            
                etaInfo.removeClass('error').addClass('correct').html('&radic;').show();
                etaInfo.removeClass('wrong').addClass('normal');
            }
        })			
    })
    
</script>
<form name="jform">
    <p>
        <label for="eta" class="block">Et&agrave;:</label>
        <select class="select" name="eta" id="eta">
            <option value="0">Seleziona</option>
            <option value="1">+50</option>
            <option value="2">30-50</option>
            <option value="3">11-29</option>
            <option value="4">1-10</option>
        </select>
    </p>
</form>

controlla la sintassi,anche una virgola puo impedire il funzionamento

 

[Paperino78]

Ho cambiato un pochino l'impostazine, ma adesso mi appare sempre l'ok anche quando non seleziono alcun valore. Premetto ho cambiato da selettore a radio button, e ho messo così il codice. Chi mi sa spiegare come mai mi da sempre esito positivo anche quando non seleziono nessuna voce?
markup

<p>
		<label for="eta" class="block">Et&agrave;:</label>
		<input id="zero_dieci" type="radio" name="eta" />
		<label for="zero_dieci">1-10 anni</label>
		<input id="undici_trenta" type="radio" name="eta" />
		<label for="undici_trenta">11-30 anni</label>
		<input id="trenta_cinquanta" type="radio" name="eta" />
		<label for="trenta_cinquanta">31-50 anni</label>
		<input id="plus_cinquanta" type="radio" name="eta" />
		<label for="plus_cinquanta">+50 anni</label>
		</p>

e codice JS

	'eta' : function() {

			$('body').append('<div id="etaInfo" class="info"></div>');

			var etaInfo = $('#etaInfo');
			var ele = $('#plus_cinquanta');
			var pos = ele.offset();

			etaInfo.css({
				top: pos.top-8,
				left: pos.left+ele.width()+88
			});


			if($('input[name="eta"]:checked').lenght == true){
				jVal.errors = true;
				etaInfo.removeClass('correct').addClass('error').html('&larr; Quanti anni hai?').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				etaInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},

in questa occasione se io do invio senza aver compilato il form mi appaiono tutti gli errori tranne quello sull'età che mi da esito corretto.