Controlli campi email ajax

[Protooler]

Ciao a tutti,
sto cercando di implementare altre condizioni sul controllo di un campo email..
oltre a quella base che ho fatto..non riesco però a gestire i vari else..

Vorrei che ci sia un controllo sulla lunghezza minima, sulla presenza di lettere dopo la @ e di almeno due lettere dopo il "."

$(document).ready(function(){ 
    $("form#register").submit(function(){ 
          var email = $("input#email").val();
          var name = $("input#name").val();
          if (email==""||email=="Email")
		  {
				$('#emailInput').append("<p class='required'>required</p>");
				document.register.email.value='Email';
				return false;
		  }else if(email.indexOf("@") < 1){
				$('#emailInput').append("<p class='required'>invalid</p>");
				document.register.email.focus();  //could be used to focus on email field
				return false;				  	
		  }else{
			  var sendData = 'email='+ email + '&name=' + name;
			  $.ajax({
				type: "POST",
				url: "submit.php",
				data: sendData,
				success: function() {
				  $('#right').html("<div id='submitted'></div>");
				  $('#submitted').html("<?php echo $successMessage;?>")
				  .hide()
				  .fadeIn(1000, function() {
					
				  });
				}
			  });
			  return false;
		  }
    });  
});

Grazie in anticipo!

[Xinod]

if(!email.match(/^([a-z0-9\-\_\.]{3,})+@([a-z0-9\-\_])+(\.[a-z]{2,6})+$/i)){
// non e' valido
// quel 3 e' il numero minimo di caratteri prima dell' @
}

dove email e' il value del campo con id="email"
cosa che tra parentesi non dovrebbe verificarsi: i nomi delle variabili devono essere diversi da id/name usati nel documento

ciao

[Protooler]

Grazie Xinod!
Proverò ora ad implementare altri controlli..ad esempio sul campo name..
è corretto così?

$(document).ready(function(){ 
    $("form#register").submit(function(){ 
          var email = $("input#email").val();
          var name = $("input#name").val();
          if (email==""||email=="Email")
		  {
				$('#emailInput').append("<p class='required'>required</p>");
				document.register.email.value='Email';
				return false;
		  }else if(!email.match(/^([a-z0-9\-\_\.]{3,})+@([a-z0-9\-\_])+(\.[a-z]{2,6})+$/i)){
				$('#emailInput').append("<p class='required'>invalid</p>");
				document.register.email.focus();
				return false;				  	
		  }
		  if (name==""||name=="Name")
		  {
				$('#nameInput').append("<p class='required'>required</p>");
				document.register.name.value='Name';
				return false;			  	
		  }
		  else{
			  var sendData = 'email='+ email + '&name=' + name;
			  $.ajax({
				type: "POST",
				url: "submit.php",
				data: sendData,
				success: function() {
				  $('#right').html("<div id='submitted'></div>");
				  $('#submitted').html("<?php echo $successMessage;?>")
				  .hide()
				  .fadeIn(1000, function() {
					
				  });
				}
			  });
			  return false;
		  }
    });  
});

[Xinod]

come ti ho gia' detto, "email" non puo' essere tanto il nome di una variabile quanto un id di un elemento, o l' uno o l'altro

var email = $("input#email").val();

altrimenti ti esponi a problemi

ancora peggio per "name" che e' parola riservatissima
a parte la variabile, neanche un elemento puo' chiamarsi "name"

ciao

[Protooler]

Ah ok..
grazie per la pazienza!
Sto provando ad implementare gli altri controlli ma con scarso risultato..
Oltretutto una volta che verifico la var nam non riesco a togliere il div append..e passare al capo successivo..

<script language="javascript">
$(document).ready(function(){ 
    $("form#contatto").submit(function(){ 
          var nam = $("input#nome").val();
          var cog = $("input#cogn").val();
          var vi = $("input#via").val();
          var ca = $("input#cap").val();
          var citt = $("input#citta").val();
          var pro = $("input#prov").val();
          var te = $("input#tel").val();
          var emai = $("input#email").val();
          var msg = $("input#mess").val();
          
          if (nam=="")
		  {
				$('#nameInput').append("<div class='required'>required</div>");
				document.contatto.nome.value='';
				return false;
			}
			else {	$('#nameInput').remove("<div class='required'>required</div>");
			return true;
			}
          if (cog=="")
		  {
				$('#surnInput').append("<div class='required'>required</div>");
				document.contatto.cogn.value='';
				return false;
			}		
          if (emai=="")
		  {
				$('#emailInput').append("<div class='required'>required</div>");
				document.contatto.emai.value='Email';
				return false;
		  }else if(!emai.match(/^([a-z0-9\-\_\.]{3,})+@([a-z0-9\-\_])+(\.[a-z]{2,6})+$/i)){
				$('#emailInput').append("<p class='invalid'>invalid</p>");
				document.contatto.emai.focus();
				return false;				  	
		  }
		  else{
			  var sendData = 'emai='+ email + '&nam=' + nome;
			  $.ajax({
				type: "POST",
				url: "submit.php",
				data: sendData,
				success: function() {
				  $('#cont-form').html("<div id='submitted'></div>");
				  $('#submitted').html("<?php echo $successMessage;?>")
				  .hide()
				  .fadeIn(1000, function() {
					
				  });
				}
			  });
			  return false;
		  }
    });  
});
</script>

[Vindav]

- per rimuovere il div required basta che fai : $(".required").remove();
- per far si che continui con i seguenti controlli devi rimuovere i return

[Protooler]

Ciao vindav!
ho provato cosi' e ho ottenuto qualche risultato

$(document).ready(function(){ 
    $("form#contatto").submit(function(){ 
          var nam = $("input#nome").val();
          var cog = $("input#cogn").val();
          var vi = $("input#via").val();
          var ca = $("input#cap").val();
          var citt = $("input#citta").val();
          var pro = $("input#prov").val();
          var te = $("input#tel").val();
          var emai = $("input#email").val();
          var msg = $("input#mess").val();
          
			if (nam==""){
				$('#nameInput').append("<div class='required'>required</div>");
				document.contatto.nome.value='';
				document.contatto.nome.focus();
				return false;
			}
			else{
				$(".required").remove();
			}
			if (cog==""){
				$('#surnInput').append("<div class='required'>required</div>");
				document.contatto.cogn.value='';
				document.contatto.cogn.focus();
				return false;
			}
			else {
				$(".required").remove();
			}
			if (emai==""){
				$('#emailInput').append("<div class='required'>required</div>");
				document.contatto.email.value='';
				document.contatto.email.focus();
				return false;
			}
			else if(!emai.match(/^([a-z0-9\-\_\.]{3,})+@([a-z0-9\-\_])+(\.[a-z]{2,6})+$/i)){
				$(".required").remove();
				$('#emailInput').append("<p class='invalid'>invalid</p>");
				document.contatto.email.focus();
				return false;				  	
			}
		  else{
			  var sendData = '&cog=' + cogn + '&nam=' + nome + 'emai='+ email;
			  $.ajax({
				type: "POST",
				url: "submit.php",
				data: sendData,
				success: function() {
				  $('#cont-form').html("<div id='submitted'></div>");
				  $('#submitted').html("<?php echo $successMessage;?>")
				  .hide()
				  .fadeIn(1000, function() {
					
				  });
				}
			  });
			  return false;
		  }
    });  
});

ora gli append si levano man mano che fa i controlli..
sull'ultimo della mail pero' continua ad aggiungerne se inserisco piu' volte la mail errata..

[Protooler]

come non detto..in questo modo l'append si leva solo se inserisco del testo nei campi..
se continuo ad inviare con il campo vuoto appende n volte il div..

[Vindav]

prova inserendo prima degli if questo codice:

if($(".required").length > 0) $(".required").remove();

ed elimina gli else

[Protooler]

Ora funziona..fa il controllo campo per campo in modo corretto...

E' tutta sera che sbatto la testa per far convivere un paio di funzioni ma senza risultato!

$(document).ready(function(){
	$("#contatto").jqTransform();
    $("#contatto").submit(function(){ 
          var nam = $("input#nome").val();
          var cog = $("input#cogn").val();
          var sub = $("select#subject").val();
          var vi = $("input#via").val();
          var ca = $("input#cap").val();
          var pro = $("select#prov").val();
          var cit = $("select#citta").val();
          var te = $("input#tel").val();
          var emai = $("input#email").val();
          var msg = $("input#mess").val();
          var prv = $("input#privacy_si").val();
			if($(".required").length > 0) $(".required").remove();
			if (nam==""){
				$('#nameInput').append("<div class='required'>required</div>");
				document.contatto.nome.value='';
				document.contatto.nome.focus();
				return false;
			}
			if (cog==""){
				$('#surnInput').append("<div class='required'>required</div>");
				document.contatto.cogn.value='';
				document.contatto.cogn.focus();
				return false;
			}
			if (sub==""||sub=="Scegli"){
				$('#subInput').append("<div class='required'>required</div>");
				document.contatto.subject.value='';
				document.contatto.subject.focus();
				return false;
			}
			if (vi==""){
				$('#viaInput').append("<div class='required'>required</div>");
				document.contatto.via.value='';
				document.contatto.via.focus();
				return false;
			}
			if (ca==""){
				$('#capInput').append("<div class='required'>required</div>");
				document.contatto.cap.value='';
				document.contatto.cap.focus();
				return false;
			}
			if (pro==""||pro=="Scegli"){
				$('provInput').append("<div class='required'>required</div>");
				document.contatto.prov.value='';
				document.contatto.prov.focus();
				return false;
			}			
			if (cit==""||cit=="Scegli"){
				$('#cittaInput').append("<div class='required'>required</div>");
				document.contatto.citta.value='';
				document.contatto.citta.focus();
				return false;
			}
			if (te==""){
				$('#telInput').append("<div class='required'>required</div>");
				document.contatto.tel.value='';
				document.contatto.tel.focus();
				return false;
			}
			if (emai==""){
				$('#emailInput').append("<div class='required'>required</div>");
				document.contatto.email.value='';
				document.contatto.email.focus();
				return false;
			}
			else if(!emai.match(/^([a-z0-9\-\_\.]{3,})+@([a-z0-9\-\_])+(\.[a-z]{2,6})+$/i)){
				$('#emailInput').append("<p class='required'>required</p>");
				document.contatto.email.focus();
				return false;				  	
			}
			if (prv.checked == false) {
				$('#privacyInput').append("<p class='invalid'>invalid</p>");
				document.contatto.privacy_si.focus();
				return false;
			}
		  else{
			  var sendData = '&nam=' + nome + '&cog=' + cogn + '&sub=' + subject + '&vi=' + via + '&ca=' + cap + '&pro=' + prov + '&cit=' + citta + '&te=' + tel + '&emai='+ email + '&prv='+ privacy_si;
			  $.ajax({
				type: "POST",
				url: "submit.php",
				data: sendData,
				success: function() {
				  $('#cont-form').html("<div id='submitted'></div>");
				  $('#submitted').html("<?php echo $successMessage;?>")
				  .hide()
				  .fadeIn(1000, function() {
					
				  });
				}
			  });
			  return false;
		  }
    });  
});

intanto con $("#contatto").jqTransform(); richiamo la funzione che mi fa lo style dei vari input ecc..

la funzione per il controllo sembrerebbe andare se non fosse che mi si inchioda sulla select delle province e citta'..
dato che le scelgo in questo modo..

var regiondb = new Object()
regiondb["Agrigento"] = [regiondb["Ascoli Piceno"] = [{value:"", text:""},
                      {value:"", text:""},
                      {value:"", text:""},
                      {value:"", text:""}];
regiondb["Alessandria"] = [{value:"", text:""},
                      {value:"", text:""},
                      {value:"", text:""}];
regiondb["Ancona"] = [{value:"", text:""},
                      {value:"", text:""},
                      {value:"", text:""}];

function setCities(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.contatto.elements["citta"];
    while (cityChooser.options.length) {
        cityChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    newElem = document.createElement("option");
    newElem.text = "- - - -";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[i].text;
            newElem.value = db[i].value;
            cityChooser.add(newElem, where);
        }
    }
}

Le funzioni se usate separatamente funzionano..
non riesco a capire cosa possa essere.
Confido in te Vindav..o in qualche buon anima che possa aiutarmi..