Posizione errore Jquery.Validate

[lupoz]

Sto creando un form per l'inserimento di aziende in un database e vorrei controllarlo con Jquery.validate. Ho creato un piccolo script che sembra funzionare però vorrei mettere gli errori in un punto da me stabilito... come faccio?

Html:

<form method="post" id="new_company" action="companies.php?step=3">
    <div class="table">
        <table class="listing form" cellpadding="0" cellspacing="0">
            <tr>
                <th class="full" colspan="3">New Company</th>
            </tr>
            <tr>
                <td class="first" width="120">Nome Azienda</td>
                <td width="120"><input class="text" type="text" id="company_name" name="company_name"></td>
                <td class="last">Errore qui</td>
            </tr>
        </table>
    </div>
</form>

Javascript

$().ready(function() {
	$("#new_company").validate({
		submitHandler: function() { 
			alert('tutti i dati sono stati inseriti correttamente!');
			document.getElementById('new_company').submit();
		},			
		rules: {
			company_name: {
				required: true,
				minLength: 5,
				maxLength: 32
			}			
		},
		messages: {
			company_name: {
				required: "Inserisci l'username",
				minLength: "Minimo 5 lettere",
				maxLength: "Massimo 32 lettere"
			}
		}
	});
});

[Vindav]

Originariamente inviato da lupoz
Sto creando un form per l'inserimento di aziende in un database e vorrei controllarlo con Jquery.validate. Ho creato un piccolo script che sembra funzionare però vorrei mettere gli errori in un punto da me stabilito... come faccio?

Html:

<form method="post" id="new_company" action="companies.php?step=3">
    <div class="table">
        <table class="listing form" cellpadding="0" cellspacing="0">
            <tr>
                <th class="full" colspan="3">New Company</th>
            </tr>
            <tr>
                <td class="first" width="120">Nome Azienda</td>
                <td width="120"><input class="text" type="text" id="company_name" name="company_name"></td>
                <td class="last">Errore qui</td>
            </tr>
        </table>
    </div>
<div id="errorContainer"> 
</form>

Javascript

$().ready(function() {
	$("#new_company").validate({
errorLabelContainer: "#errorContainer", 
		submitHandler: function() { 
			alert('tutti i dati sono stati inseriti correttamente!');
			document.getElementById('new_company').submit();
		},			
		rules: {
			company_name: {
				required: true,
				minLength: 5,
				maxLength: 32
			}			
		},
		messages: {
			company_name: {
				required: "Inserisci l'username",
				minLength: "Minimo 5 lettere",
				maxLength: "Massimo 32 lettere"
			}
		}
	});
});

[lupoz]

Grazie! funziona, però i vorrei che il messaggio fosse posizionato diversamente per ogni campo (nell'esempio è solo uno ma saranno di più).

Ora mette tutti gli errori assieme.

[lupoz]

ho risolto in questo modo, praticamente il codice mette l'errore relativo nella cella successiva al campo.

errorPlacement: function(error, element) {
                         error.appendTo( element.parent("td").next("td") );
},

[Vindav]

beh allora ti devi gestire ogni caso, lo puoi fare utilizzando l'opzione errorPlacement

$().ready(function() {
	$("#new_company").validate({
		submitHandler: function() { 
			alert('tutti i dati sono stati inseriti correttamente!');
			document.getElementById('new_company').submit();
		},			
		rules: {
			company_name: {
				required: true,
				minLength: 5,
				maxLength: 32
			}			
		},
		messages: {
			company_name: {
				required: "Inserisci l'username",
				minLength: "Minimo 5 lettere",
				maxLength: "Massimo 32 lettere"
			}
		},
                errorPlacement: function(error, element) {
                     
                }
	});
});

La funzione errorPlacement ha due parametri di input
- error è il contenitore della label d'errore
- element è il campo che è andato in errore.

Devi decidere semplicemente dove vuoi posizionare l'oggetto error nel dom.

[lupoz]

Esatto grazie!