Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sprawdzanie pól formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kubax33
Witam,
mam sktypt, który gdzieś znalazłem na tym forum do sprawdzania pustych pól formularza.
Działa fajnie, ale chciałbym dodać do niego inne możliwości.

  1. <script type="text/javascript" language="JavaScript">
  2. var ClassName2 = "val"; //nazwa klasy elementów, które mają być poddane walidacji
  3. var FocusColor2 = "#FF3366"; //kolor podświetlenia niewypełnionego pola
  4.  
  5. function checkForm2(theFormm) {
  6. var error = false;
  7. var inputfields = document.getElementsByTagName("input");
  8. for(var x = 0 ; x < inputfields.length ; x++ ) {
  9. if(inputfields[x].getAttribute("class") == ClassName2) {
  10. if (inputfields[x].value.length == 0) {
  11. inputfields[x].style.background = FocusColor2;
  12. error = true;
  13. }
  14. else {
  15. inputfields[x].style.background = '';
  16. }
  17. }
  18. }
  19. if(error == true) {
  20. alert("Wypełnić podświetlone pola!");
  21. return false;
  22. }
  23. }
  24.  
  25. </script>

  1. <FORM action="przeslij.php" method="post" name=formularzedycja onsubmit="return checkForm2(this)">
  2. <INPUT type="text" style="width: 147px;" name="imie" class="val">
  3. <INPUT type="text" style="width: 147px;" name="nazwisko" class="val">
  4. <INPUT type="text" style="width: 147px;" name="kwota" class="val">
  5. </form>


Mianowicie np. chciałbym, aby skrypt dodatkowo sprawdzał czy dane pole zawiera liczbę i nie ma innych znaków niepożądanych i mam coś takiego po połączeniu dwóch skryptów:

  1. <script type="text/javascript" language="JavaScript">
  2. var ClassName2 = "val2"; //nazwa klasy elementów, które mają być poddane walidacji
  3. var FocusColor2 = "#FF3366"; //kolor podświetlenia niewypełnionego pola
  4.  
  5. function checkForm2(theFormm) {
  6. var error = false;
  7. var inputfields = document.getElementsByTagName("input");
  8. for(var x = 0 ; x < inputfields.length ; x++ ) {
  9. if(inputfields[x].getAttribute("class") == ClassName2) {
  10. if (inputfields[x].value.length == 0) {
  11. inputfields[x].style.background = FocusColor2;
  12. error = true;
  13. }
  14. else {
  15. inputfields[x].style.background = '';
  16. }
  17. }
  18. }
  19. if(error == true) {
  20. alert("Aby dokonać edycji klienta musisz wypełnić podświetlone pola!");
  21. return false;
  22. }
  23.  
  24. var reg = /^-?\d+(([,\.]?\d+)|())$/;
  25. if(reg.test(document.forms['formularzedycja'].kwota.value)) {
  26. return true;
  27.  
  28. } else {
  29. alert("Wpisano zły format kwoty!\nPrawidłowy format to np. 9.99");
  30. return false;
  31. }
  32.  
  33.  
  34. }
  35. </script>


  1. <FORM action="przeslij.php" method="post" name=formularzedycja onsubmit="return checkForm2(this)">
  2. <INPUT type="text" style="width: 147px;" name="imie" class="val">
  3. <INPUT type="text" style="width: 147px;" name="nazwisko" class="val">
  4. <INPUT type="text" style="width: 147px;" name="kwota" class="val">
  5. </form>


Moja wersja działa poprawnie jednak nie tak jakbym chciał. Tzn. nie jest ona połączona ze skryptem do sprawdzania pustych pól formularza... Chciałbym, aby sprawdzanie kwoty był wykonane i również podświetliło pole, które jest źle wypełnione a teraz po wpisaniu złych danych w input wyskakuje tylko sam alert bez podświetlenia pola.
Chyba musiałoby być to w tej samej pętli co sprawdzanie pól formularza. Jak dodawać kolejne akcje do sprawdzania określonych pól formularza za jednym zamachem w spoób poprawny. Robiłem to metodą prób i błędów więc udało mi się zrobić tak jak teraz to funkcjonuje.
WiruSSS
Spróbuj tak, nie sprawdzałem ale powinno działać

[JAVASCRIPT] pobierz, plaintext
  1. var ClassName2 = "val", //nazwa klasy elementów, które mają być poddane walidacji
  2. FocusColor2 = "#FF3366"; //kolor podświetlenia niewypełnionego pola
  3.  
  4. function checkForm2(theFormm) {
  5. var error = false,
  6. inputfields = document.getElementsByTagName("input"),
  7. reg = /^-?\d+(([,\.]?\d+)|())$/;
  8.  
  9. for (var x = 0; x < inputfields.length; x++) {
  10. if (inputfields[x].getAttribute("class") == ClassName2) {
  11.  
  12. inputfields[x].style.background = FocusColor2;
  13.  
  14. if (inputfields[x].value.length == 0) {
  15. error = 'Aby dokonać edycji klienta musisz wypełnić podświetlone pola!';
  16. } else if (reg.test(document.forms['formularzedycja'].kwota.value)) {
  17. error = 'Wpisano zły format kwoty!\nPrawidłowy format to np. 9.99';
  18. } else {
  19. inputfields[x].style.background = '';
  20. }
  21. }
  22. }
  23. if (error) {
  24. alert(error);
  25. return false;
  26. }
  27. }
[JAVASCRIPT] pobierz, plaintext


Tylko tutaj podświetli ci wszystkie pola ale zostanie wyświetlony error dla ostatniego, alternatywnie można zrobić to na tyle sposobów, że aż mi się nie chce pisać dlatego dobrze by było abyś określił jak chcesz o tych errorach chciał informować. Ja osobiście nie polecam alertów w ogóle, są irytujące, ale to Twoja decyzja
kubax33
Dziękuje za pomoc. Jednak zrezygnowałem z alertów i postanowiłem sprawdzać pola formularza dynamicznie z jquery, a efekt jest na pewno lepszy.

Zamykam

Pozdrawiam
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.