Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Problem z nadaniem stylu
Forum PHP.pl > Forum > Przedszkole
Lathiel
15.06.2012, 06:40:10
Witam, mam następujący problem - po zastosowaniu javascript'u moje znaczniki input zostają rozsiane po całej stronie i stają się odporne na edytowanie poprzez style




Niżej zamieszczam kod html pliku rejestracja.php
[PHP] pobierz, plaintext 
  1. <script type="text/javascript" src="js/moje.js"></script>
  2.  
  3. <form action="index.php?view=rejestruj" method="post" id="regform">
  4.  
  5. <ol>
  6. <li><label>Login <span class="red">*</span></label>
  7.               <input type="text" id="login" name="user[login]" class="text" />              	
  8.               <div id="errorimie" class="error"></div>
  9.             </li>
  10.              <li>
  11.              <label>Email <span class="red">*</span></label>
  12.               <input  type="text" id="email" name="user[email]" class="text" />
  13.               <div id="erroremail" class="error"></div>
  14.             </li>
  15.            <li>
  16.              <label>Hasło <span class="red">*</span></label>
  17.               <input  type="password" id="haslo" name="user[haslo]" class="text" />
  18.               <div id="errorhaslo" class="error"></div>
  19.             </li>
  20.             <li>
  21.              <label >Powtórz hasło <span class="red">*</span></label>
  22.               <input  type="password" id="phaslo" name="user[phaslo]" class="text" />
  23.               <div id="errorphaslo" class="error"></div>
  24.             </li>
  25.  
  26.             <li class="buttons">
  27.                <input type="submit" name="submitRejestruj" id="submitRejestruj" class="przycisk" value="Zarejestruj Mnie"/>
  28.               <div class="clr"></div></li></ol>
  29. </form>
[PHP] pobierz, plaintext


A tutaj javascript

[JAVASCRIPT] pobierz, plaintext 
  1. function czyWypelnione(pole){
  2. 	if(pole.value == "")
  3. 	{
  4. 	document.getElementById("error"+pole.id).innerHTML = "To pole jest wymagane!";	
  5. 	return false;	
  6. 	}
  7. else{
  8. 	document.getElementById("error"+pole.id).innerHTML = "";
  9. 	return true;
  10. 	}
  11.  
  12. }
  13.  
  14. function areFieldsEqual(pole1, pole2)
  15.  {
  16.  if(pole1.value != pole2.value) 
  17.  {
  18. 	 document.getElementById("error"+pole2.id).innerHTML = "Hasła muszą być takie same!";	
  19. 	return false; 
  20.  }
  21. else { 
  22.   document.getElementById("error"+pole2.id).innerHTML = "";	
  23. 	 return true;
  24.  
  25. 	 }
  26.  
  27. }
  28.  
  29.  
  30. function isMinLength(pole, mindlugosc){
  31. 	var wartoscpola = pole.value;
  32. 	if(wartoscpola.length < mindlugosc){
  33. 		document.getElementById("error"+pole.id).innerHTML = "Pole musi być minimum" + mindlugosc + "znak(ów)";	
  34. 	return false	
  35. 	}
  36. 	else{
  37. 		document.getElementById("error"+pole.id).innerHTML = "";	
  38. 	return true	
  39. 	}
  40.  
  41. }
  42.  
  43. function isValidEmail(pole){
  44. 	var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z] {2,4})$/;
  45. 	if(reg.test(pole.value) == false) {
  46. 		document.getElementById("error"+pole.id).innerHTML = "Musisz podać prawidłowy adres email";	
  47. 		return false
  48. 	} 
  49. 	else 
  50. 	{
  51. 		document.getElementById("error"+pole.id).innerHTML = "";	
  52. 	return true;	
  53. 	}
  54.  
  55. }
  56.  
  57. window.onload = function (){
  58.  
  59. 		document.getElementById("regform").onsubmit = function (){
  60. 		if(
  61.  
  62. 			czyWypełnione(this.login) &&
  63. 			isMinLength(this.login, 4) &&
  64. 			czyWypełnione(this.email) &&
  65. 			isValidEmail(this.email) &&
  66. 			czyWypełnione(this.haslo) &&
  67. 			isMinLength(this.haslo, 5) &&
  68. 			areFieldsEqual(this.haslo, this.phaslo)
  69.  
  70. 			)
  71. 			{
  72. 			return true;
  73. 		}
  74. 		else {
  75. 			return false;
  76. 		}
  77. 		}
  78.  
  79. }
[JAVASCRIPT] pobierz, plaintext
kamil4u
15.06.2012, 14:51:52
Daj link do demo. Kod na pierwszy rzut oka wydaje się w porządku.
Lathiel
15.06.2012, 16:08:02
Polecacie jakiś serwer z dobrym mysql, bo mój testowy na CBA nie chce współpracować
kamil4u
15.06.2012, 16:23:18
Po co mi/Tobie mySQL. Skoro problem jest w CSS/JS to nie potrzebujesz serwera z PHP.

Masz zrobić proste demo, aby pokazać jak wygląda problem. Możesz umieścić kod np. tu http://jsfiddle.net/
Lathiel
15.06.2012, 16:36:00
http://jsfiddle.net/A23Ma/1/

kod tutaj działą bez problemu - czyli coś ze wczytywaniem do contentu


tak wygląda plik content.php
[HTML] pobierz, plaintext 
  1. <link href="style.css" rel="stylesheet" type="text/css" />
  2. <div id="tekst">
  3. <?php
  4.  
  5. include('tresc/' . $TRESC . '.php');
  6.  
  7.  
  8.  
  9.  
  10.  
  11. ?>
  12.  
  13. </div>
[HTML] pobierz, plaintext
IProSoft
15.06.2012, 17:26:50
A możesz mi wyjaśnić jakim cudem działa ci kod bez problemu, jeśli masz:
Kod
<input type="text" id="login" name="user[login]" class="text" />
<div id="errorimie" class="error"></div>

czyli zamiast errorlogin errorimie
questionmark.gif
Prser JS zaraz wyrzuca błąd.

[JAVASCRIPT] pobierz, plaintext 
  1. <script>
  2. function czyWypelnione(pole){
  3.  
  4. 	if(pole.value == "")
  5.     {
  6. 		document.getElementById("error"+pole.id).innerHTML = "To pole jest wymagane!";	
  7. 		return false;	
  8.     }
  9.     else{
  10. 		document.getElementById("error"+pole.id).innerHTML = "";
  11. 		return true;
  12.     }
  13.  
  14.     }
  15.  
  16.     function areFieldsEqual(pole1, pole2)
  17.     {
  18. 		if(pole1.value != pole2.value)
  19. 		{
  20. 			document.getElementById("error"+pole2.id).innerHTML = "Hasła muszą być takie same!";	
  21. 			return false;
  22. 		}
  23. 		else {
  24. 			document.getElementById("error"+pole2.id).innerHTML = "";	
  25. 			return true;
  26. 		}
  27.  
  28.     }
  29.  
  30.  
  31.     function isMinLength(pole, mindlugosc){
  32. 		var wartoscpola = pole.value;
  33. 		if(wartoscpola.length < mindlugosc){
  34. 			document.getElementById("error"+pole.id).innerHTML = "Pole musi być minimum" + mindlugosc + "znak(ów)";	
  35. 			return false	
  36. 		}
  37. 		else{
  38. 			document.getElementById("error"+pole.id).innerHTML = "";	
  39. 			return true	
  40. 		}
  41.  
  42.     }
  43.  
  44.     function isValidEmail(pole){
  45. 		var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z] {2,4})$/;
  46. 		if(reg.test(pole.value) == false) {
  47. 			document.getElementById("error"+pole.id).innerHTML = "Musisz podać prawidłowy adres email";	
  48. 			return false
  49. 		}
  50. 		else
  51. 		{
  52. 			document.getElementById("error"+pole.id).innerHTML = "";	
  53. 			return true;	
  54. 		}
  55.  
  56.     }
  57.  
  58.     window.onload = function (){
  59.  
  60.     document.getElementById("regform").onsubmit = function (){
  61. 		if(
  62.  
  63. 		czyWypelnione(this.login) &&
  64. 		//isMinLength(this.login, 4) &&
  65. 		czyWypelnione(this.email) &&
  66. 		isValidEmail(this.email) &&
  67. 		czyWypelnione(this.haslo) &&
  68. 		//isMinLength(this.haslo, 5) &&
  69. 		areFieldsEqual(this.haslo, this.phaslo)
  70.  
  71. 		)
  72. 		{
  73. 			return true;
  74. 		}
  75. 		else 
  76. 		{
  77. 			return false;
  78. 		}
  79.     }
  80.  
  81.     }
  82. </script>
[JAVASCRIPT] pobierz, plaintext

Lathiel
15.06.2012, 17:32:08
Zmieniłem na poprawne i niestety niczego to nie zmieniło, w kodzie miesza 

[HTML] pobierz, plaintext 
  1. id="login" name="user[login]"
[HTML] pobierz, plaintext


jak to usunę, albo zastąpie

[HTML] pobierz, plaintext 
  1. id="email" name="user[email]"
[HTML] pobierz, plaintext


pola wracają na właściwe miejsca
IProSoft
15.06.2012, 17:56:35
Podeślij adres strony bo będziemy się długo bawić.
Lathiel
15.06.2012, 18:07:37
http://drphil2.cba.pl/
kamil4u
15.06.2012, 22:22:47
Właśnie po to potrzebne są dema. To nie ma nic wspólnego z JS.

Sprawdź plik z CSS, następnie konsolę błędów, a następnie styl dla #haslo i brak średnika po width.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.