attributo dinamico append con body o id

[Paperino78]

Buonasera, spero di essere abbastanza chiaro da farmi capire e riuscire a risolvere questo "semplice", per molti, problema per me.

Vengo al dunque. Nel mio sito adotto la validazione tramite jquery ma ovviamente anche via php. Ad ogni campo ho un div che appare e mi avvisa se il campo è vuoto o non corrispondente a determinate condizioni poste da me.
Il codice jquery che uso è questo:

$(document).ready(function(){

	var jVal = {

		'email' : function() {

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

			var emailInfo = $('#emailInfo');
			var ele = $('#email_rec');
			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			var patt = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*\s+&lt;(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})&gt;$|^(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})$/i;

			if(!patt.test(ele.val())) {
				jVal.errors = true;
				emailInfo.removeClass('correct').addClass('error').html('&larr; Mail usata nella registrazione').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}

		},


		'risposta' : function() {

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

			var rispostaInfo = $('#rispostaInfo');
			var ele = $('#risposta_rec');
			var pos = ele.offset();

			rispostaInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

			if(ele.val().length == "") {
				jVal.errors = true;
				rispostaInfo.removeClass('correct').addClass('error').html('&larr; Ricordati la risposta!').show();
				ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
			} else {
				rispostaInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},


		'dati' : function (){
			$('body').append('<div id="datiInfo" class="info"></div>');
			var datiInfo = $('#datiInfo');
			var ele = $('#cred_pass');
			var pos = ele.offset();
			datiInfo.css({
				top: pos.top-10,
				left: pos.left+ele.width()+138
			});
			if($('input[name="dati"]:checked').length === 0) {
				jVal.errors = true;
				datiInfo.removeClass('correct').addClass('error').html('&larr; Cosa vuoi recuperare?').show();
				ele.removeClass('normal').addClass('wrong');
			} else {
				datiInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
			}
		},



		'sendIt' : function (){
			if(!jVal.errors) {
				$('#sendmail').change('ok');
				$('#jform').submit();
			}
		}
	};

	// ====================================================== //

	$('#send').click(function (){
		var obj = $.browser.webkit ? $('#jform') : $('html');
		obj.animate({ scrollTop: $('body').offset() }, 750, function (){
			jVal.errors = false;
			jVal.email();
			jVal.risposta();
			jVal.dati();
			jVal.sendIt();
		});
		return false;
	});
	//Qui colleghiamo il valore jVal.xxx al valore del form
	$('#email_rec').change(jVal.email);
	$('#risposta_rec').change(jVal.risposta);
	$('input[name="dati"]').change(jVal.dati);
});

Il tutto funziona bene, ma il mio problema è che se la pagina che l'utente visita viene ridimensionata, ovviamente questi div dipendendo dal body vanno fuori misura. L'ideale sarebbe che fossero "legati" ad un altro id che possa essere magari il form. Ho provato a cambiare il codice, sostituendo alla parola body semplicemente l'id del form ma senza risultato. Qualcuno saprebbe dirmi come devo fare? Sbaglio da qualche parte?

Grazie

 

[Paperino78]

Ragazzi 87 visite, nessuna idea? Sbaglio in qualcosa?

 

[criric]

CIao, io non l'avevo visto.
Puoi evitare di far creare il contenitore a javascript mettendolo direttamente nell'html a fianco del proprio input, magari usa uno span al posto del div. Setti con i css il display a none, nel codice che hai postato c'è già il metodo show() per mostrarlo, se invece devi nasconderlo puoi usare hide(). Più o meno come ho fatto io qui.

 

[Paperino78]

Grazie criric! ho risolto il mio problema.

 

[Paperino78]

Nel caso interessasse a qualcuno ho aggiunto uno span nel codice html sotto il tag input, gli ho dato un aspetto con i css mentre nel codice postato prima ho tolto queste righe:

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

			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+16
			});

in quanto la posizione offset era legata al valore della pagina, mentre i css li ho impostati nel file dedicato.

Vorrei ringraziare criric che ancora una volta mi ha fatto "svoltare la giornata".