formularz - walidacja, mała przeróbka Opcje

[rydlik]

Witam wszystkich, przyszło mi się zmierzyć z następującym problemem.

Mam na stronie formularz:

[HTML] pobierz, plaintext 
<form  id="contact-frm">
 
<label for="username">login <strong class="asterisk">*</strong></label>
<input name="username" id="username" type="text"><span id="status_login"></span>
 
<label for="mail">adres email <strong class="asterisk">*</strong></label>
<input name="mail" id="mail" type="text"><span id="status_mail"></span>
 
<input type="submit" name="Submit" id="registerButton" value="Zarejestruj"  />
 
</form>
 
[HTML] pobierz, plaintext 

oraz kod, który odpowiedzialny jest za walidacje:

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
 
		$("#haslo2, #haslo1").change(function() { 
			var haslo2 = $("#haslo2").val();
			var haslo1 = $("#haslo1").val();
			var msgbox = $("#status_haslo");
 
			if(haslo1.length > 3) {
				if (haslo2 != haslo1){
					$("#haslo1").removeClass("green");
					$("#haslo1").addClass("read");
					$("#haslo2").removeClass("green");
					$("#haslo2").addClass("read");
					msgbox.html('<font color="Red"> hasła różne </font>  ');
					$("#status_haslo1").html('');
				} else {
					$("#haslo1").removeClass("red");
					$("#haslo1").addClass("green");
					$("#haslo2").removeClass("red");
					$("#haslo2").addClass("green");
					msgbox.html('<img src="accept.png" align="absmiddle"> <font color="Green"> hasła poprawne </font>  ');	
					$("#status_haslo1").html('');
				}
			} else {
				$("#status_haslo1").html('<font color="#cc0000">hasło za krótke</font>');
			}
		});
 
 
		$("#mail").change(function() { 
			var msgbox = $("#status_mail");
			var mail = $("#mail").val();
			var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
         	var litPatt = /^[2-9]{5,5}$/;
            var odp = regex.test(mail);
 
			if (!odp) {
				msgbox.html('<font color="Red"> email nie poprawny </font>');	
			} else {
				$("#status_mail").html('<img src="loader.gif" align="absmiddle">&nbsp;sprawdzanie dostępności...');
 
			$.ajax({  
    		type: "POST",  
    		url: "check_username.php",  
    		data: "mail="+ mail,  
    		success: function(msg){  
 
   				$("#status_mail").ajaxComplete(function(event, request){ 
				var d = msg;
				var str=msg.substr(0, 2);
 
				if(str == 'OK')	{ 
	    			$("#mail").removeClass("red");
	    			$("#mail").addClass("green");
        			msgbox.html('<img src="accept.png" align="absmiddle"> <font color="Green"> email poprawny </font>');	
 
				} else {  
	     			$("#mail").removeClass("green");
		 			$("#mail").addClass("red");
					msgbox.html('<font color="Red"> email jest już zajęty</font>');
				}  
   				});
   			} 
   		}); 
 
 
			}
		});
 
	$("#username").change(function() { 
		var username = $("#username").val();
		var msgbox = $("#status_login");
 
 
		if(username.length > 3) {
			$("#status_login").html('<img src="loader.gif" align="absmiddle">&nbsp;sprawdzanie dostępności...');
 
			$.ajax({  
    		type: "POST",  
    		url: "check_username.php",  
    		data: "username="+ username,  
    		success: function(msg){  
 
   				$("#status_login").ajaxComplete(function(event, request){ 
				var d = msg;
				var str=msg.substr(0, 2);
 
				if(str == 'OK')	{ 
	    			$("#username").removeClass("red");
	    			$("#username").addClass("green");
        			msgbox.html('<img src="accept.png" align="absmiddle"> <font color="Green"> dostępny </font>  ');
 
				} else {  
	     			$("#username").removeClass("green");
		 			$("#username").addClass("red");
					msgbox.html(msg);
					//registerButton.style.display = "block";
				}  
   				});
   			} 
   		}); 
 
 
 
 
} else {
	$("#username").addClass("red");
	$("#status_login").html('<font color="#cc0000">login za krótki</font>');
}
 
 
 
return false;
});
 
});
 
[PHP] pobierz, plaintext 

moja gorąca prośba: co dopisać i jak to zmodyfikować aby jeśli login i mail bedą juz po walidacji czyli poprawne, po wciśnięciu "submit" formularza strona się nie przeładowała a pola mail i login zapisały się w bazie

[com]

yy co jeszcze raz? ale nie wiem ale z tego co mam wrażenie to nie ten dział bo zapis do bazy danych to php, chyba że serwer node.js ale z kodu to nie wynika...

[rydlik]

nie nie, dział dobry bo nie chodzi o zapis do bazy. Może faktycznie trochę nie logicznie to napisałem.

jeszcze raz: do tego kodu strony, który zamieściłem powyżej, chciałbym napisać skrypt, który po kliknięciu w przycisk 'submit' sprawdzi wszystkie pola formularza - czy zostały podane poprawnie ( może to być jakaś zmienna kontrolna w walidacji z każdego z elementów formularza), zależy mi aby to się stało bez przeładowania strony

[com]

no to w takim razie co masz napisane? co robi ten Twój Ajax?

[rydlik]

witam, może spróbuje przedstawić problem bardziej obrazowo:

1) posiadam formularz z polem takimi jak:

- login

2) przycisk subbmit wywołuje funkcje register, kod formularza:

[PHP] pobierz, plaintext 
<form action="java script:register();" id="contact-frm">
 
<label for="username">login <strong class="asterisk">*</strong></label>
<input name="username" id="username" type="text"><span id="status_login"></span>
 
<input type="submit" name="Submit" id="registerButton" value="Zarejestruj"  />
 
</form>
[PHP] pobierz, plaintext 

3) login dzięki poniższej funkcji sprawdzany jest automatycznie czy nie jest już zajęty:

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
      $("#username").keyup(function(event){
 
         var msgbox = $("#status_login");
         var username = $("#username").val();
 
         if(username.length > 3) {
         $("#status_login").html('<img src="loader.gif" align="absmiddle">&nbsp;sprawdzanie dostępności...');
 
         $.ajax({  
          type: "POST",  
          url: "check_username.php",  
          data: "username="+ username,  
          success: function(msg){  
 
               $("#status_login").ajaxComplete(function(event, request){ 
            var d = msg;
            var str=msg.substr(0, 2);
 
            if(str == 'OK')   { 
                $("#username").removeClass("red");
                $("#username").addClass("green");
                 msgbox.html('<img src="accept.png" align="absmiddle"> <font color="Green"> dostępny </font>  ');
 
            } else {  
                 $("#username").removeClass("green");
                $("#username").addClass("red");
               msgbox.html(msg);
               //registerButton.style.display = "block";
            }  
               });
            } 
         });    
} else {
   $("#username").addClass("red");
   $("#status_login").html('<font color="#cc0000">login za krótki</font>');
}
 
});
});
[PHP] pobierz, plaintext 

4) kod funkcji register (wywoływana po kliknięciu subbmit):

[PHP] pobierz, plaintext 
function register(){
 
   var msgbox = $("#statuss");
   msgbox.html(msg);                
}
[PHP] pobierz, plaintext 

5) moja gorąca prośba, jak te kody przerobić aby treść funkcji register wykonywała się dopiero po sprawdzeniu czy login jest prawidłowy

[com]

no to nie wywołuj jej jak wysyłasz formularz tylko, dopiero w miejscu gdzie on się sprawdzi i zwróci poprawną wartość, czyli jak mniemam tutaj:

[JAVASCRIPT] pobierz, plaintext 
 if(str == 'OK') {
$("#username").removeClass("red");
$("#username").addClass("green");
msgbox.html('<img src="accept.png" align="absmiddle"> <font color="Green"> dostępny </font> ');
 register();
}
[JAVASCRIPT] pobierz, plaintext 

Oczywiście o ile dobrze Cię zrozumiałem, bo dajesz kod to dobrze, tylko trudno się w treści doszukać tego z czym masz problem (IMG:style_emoticons/default/smile.gif)