walidacja JS - prosba o znalezienie bledu w kodzie

0

Witam serdecznie, napisałam sprawdzanie pól w formularzu , ale niestety nie działają mi :(

Prosiłabym o pomoc w znalezieniu błędu ? Próbowałam , kilka krotnie ,ale bez większych rezultatów. Nawet mi zadziałało w jednym polu sprawdzanie z odświeżaniem, ale obecnie już się pogubiłam i nic mi nie działa
To kod sprawdzania 2 pól:

<?
?>
<script type="text/javascript">
 
    function sprawdzImie(){
        var wyrezenie = /^[0-9]+$/;
        var imie = document.getElementById("imie").value;
        var czyImie = wyrezenie.test(imie);
        if (czyImie) {
            document.getElementById("imieKomunikat").innerHTML = "<span style=\"color:#191038;\">Imie i nazwisko jest poprawne</span>";
            Imie = true;
        }
        else {
            document.getElementById("imieKomunikat").innerHTML = "<span style=\"color:red;\">Podaj prwaidłowo Swoje imie!</span>";
            Imie = false;
        }
    }
    
    function sprawdzEmail(){
        var wyrezenie2 = /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/;
        var email = document.getElementById("email").value;
        var czyMmail = wyrezenie2.test(email);
        if (czyEmail) {
            document.getElementById("emailKomunikat").innerHTML = "<span style=\"color:#191038;\">E-mail jest prawidłowy</span>";
            Email = true;
        }
        else {
            document.getElementById("emailKomunikat").innerHTML = "<span style=\"color:red;\">Podaj prawidłowy email!</span>";
            Email = false;
        }
    }

    function reset(){
        Imie = false;
        Email = false;
        
    }
    
    function sprawdza(){
        var ok = Imie && Email ;
        if (ok){
		document.getElementById("message").innerHTML = "<span style=\"color:191038;\">ok</span>";
           
            return true;
        }else {
            document.getElementById("message").innerHTML = "<span style=\"color:red;\">Wypełnij wszystkie pola prawidłowymi danymi!</span>";
            return false;
        }
    }
  </script>

a to kod z formularzem , który wysyła wiadomości email. To mi działa :) , ale chciałabym, alby niepoprawne dane blokowało. Za pomocą komunikatu obok formularza:

case '2': {
                ?>
    <div style="float: left; display: inline; width: 350px;">                                                            
                        <h4> Kontakt</h4>                                                          
                               Adres:     <br />                									                                    
                               </div>                                                            
            
<div style="float: right; display: inline; width: 550px;"> <h4>  Formularz kontaktowy   </h4> 
Jeśli mają Państwo pytania zapraszamy do wysłania wiadomości email. Wypełniając poniższy formularz kontaktowy:                                                             
                                <br />	     	                                                          
<table width="100%">                                            
                        <?
                            $wyslano = 0;
                            include "zabezpieczenia.php";
                        ?>
<form method="post" action="index.php?menu=9" onsubmit="return sprawdza()" onreset="reset()" >              
    
      <tr>                                    
                     <td >Treść wiadomości:</td>                                    
                     <td><textarea name="tresc" style="width: 350px; height: 100px"></textarea></td>                                    
      </tr>                                    
      <tr>                                    
                     <td style="width:100px;">Temat:</td>                                    
                     <td><input type="text" name="temat" style="width: 200px;"></td>                                    
      </tr>                                    
      <tr>                                    
                     <td style="width:100px;" >Imię i nazwisko:</td>                                    
                     <td><input type="text" name="imie" style="width: 200px;" id="imie" onkeyup="sprawdzImie()">            
      </tr>             
      <tr>  	      <td colspan="2"><label id="imieKomunikat"/> </td> </tr>              
      <tr>                                    
                      <td style="width:100px;">Adres e-mail:</td>                                    
                      <td><input type="text" name="email" style="width: 200px;" id="email" onkeyup="sprawdzEmail()">            
      </tr>	 				            
      <tr>         <td colspan="2"><label id="emailKomunikat"/></td></tr>            
      <tr>                                                   
                     <td><input type="submit" name="submit" value="Wyślij">&nbsp;                                    
                          <input type="reset" value="Wyczyść"></td>            
        </tr>             
                          <label id="message"></label>             
    </form>                                    
    
</table></div>                
    
                <?
} break;
     case '9': {
                ?>
                <?
 $naglowki = "From: [email protected]" . PHP_EOL . "Reply-To: [email protected]" . PHP_EOL . "Content-type: text/html; charset=utf-8";
 $tresc_nadawca = "Wiadomość od nadawcy: " . $_POST['email'] . "Treść Wiadomośći " . $_POST['tresc'];
      if (mail('[email protected]', $_POST['temat'], $tresc_nadawca, $naglowki)) {
          $wyslano = 1;
      echo 'Wiadomość została wysłana';
      } else {
          $wyslano = 0;
           echo 'Błąd ';
      }
                   
} break;

Prosiłabym uprzejmie o pomoc w znalezieniu błędów?

0

A nie musisz zmiennych Imie i Email wyciągnąć z ciała funkcji i zdefiniować je przed funkcjami?
Poza tym może sobie przecież to w IE 8 zdebugować w poszukiwaniu błędów.

2
Marcin.Miga napisał(a)

A nie musisz zmiennych Imie i Email wyciągnąć z ciała funkcji i zdefiniować je przed funkcjami?

Powinna tak zrobić żeby zaznaczyć, że te zmienne mają być globalne. Ale to by było zaznaczenie dla programisty czytającego kod. Bo język i bez tego wie, że są to zmienne globalne. Kasia nawet nie użyła instrukcji var dla zmiennych Imie oraz Email. Od razu przypisuje do tych zmiennych wartości. Przez to, zmienne te są implicite definiowane jako globalne.

@kasiaKasia:
Na pewno masz bezsensowne wyrażenie regularne dla imienia. Twoje wyrażenie dopasowuje ciąg cyfr. Imię raczej nie składa się z ciągu cyfr, tylko liter :P.

Druga sprawa, nazewnictwo zmiennych. Nie rób takich błędów jak wyrezenie. Powinno być wyrAzenie (z polskiego: wyrażenie). Cud, że w tej literówce byłaś konsekwentna. Po drugie, jeśli jakąś zmienną definiujesz w obrębie jednej funkcji za pomocą instrukcji var, to zmienna ta jest widoczna tylko w tej funkcji. Możesz mieć w dwóch różnych funkcjach zdefiniowane zmienne o tych samych nazwach i nie będzie konfliktu. Jeśli w funkcji sprawdzImie napiszesz var wyrazenie = /cośtam/;, to zmienna wyrazenie ma zakres funkcji sprawdzImie. Poza nią nie jest widoczna i nie powoduje konfliktów. To tzw. zmienna lokalna. Dlatego w funkcji sprawdzEmail możesz również napisać var wyrazenie = /cośinnego/; i to również będzie zmienna lokalna, widoczna tylko w funkcji sprawdzEmail. Zmienna wyrazenie z funkcji sprawdzImie to jedna zmienna, a zmienna wyrazenie z funkcji sprawdzEmail to osobna zmienna lokalna. Konfliktów nazw tu nie ma. Nie musisz więc w jednej funkcji definiować zmiennej wyrazenie, a w drugiej wyrazenie2.

Osobna sprawa jest taka, że wbrew pozorom nie możesz w XHTML-u używać skróconej notacji pustych elementów -- przynajmniej tych, które są OPCJONALNIE puste. Element img jest zawsze pusty, więc musisz go zapisać jako <img />. Ale element label normalnie nie jest pusty. Ponieważ XHTML we współczesnych przeglądarkach tak naprawdę nie jest traktowany jako XML, nie możesz skorzystać z zapisu XML-owego żeby zapisać puste etykiety jako <label />. Musisz napisać po staremu, czyli <label></label>. W Twoim przykładzie, z pewnych powodów może to nie powodować błędu, ale spróbuj gdzieś zapisać np. <p /><span></span> -- okaże się, że span będzie wewnątrz p, mimo że teoretycznie nie powinien. Przeglądarka zignoruje fakt, że zakończyłaś paragraf slashem.

To takie uwagi na marginesie. Wątpię, żeby zastosowanie się do nich naprawiło Ci całkowicie formularz. Nie chciało mi się go w tym momencie zapisywać na dysku i debugować, a kod jest tak mało czytelny, że nie chciało mi się go analizować krok po kroku na sucho. Może mi się zachce/znajdę czas później, może nie.

PS. Masz też literówkę: w jednym miejscu w funkcji sprawdzEmail masz zmienną czyMMail, zamiast czyEmail. Nawiasem mówiąc, te zmienne nie są w ogóle konieczne. Warunki z nimi czytałoby się fajnie, gdyby nazwa brzmiała np. czyEmailPoprawny. A w ogóle kod się lepiej czyta po angielsku (if (isEmailValid) ...), chociaż lepiej już mieć wszystkie identyfikatory po polsku, niż część tak, a część tak.

edit: Dobra, szarpnąłem się na odpalenie tego.

Oprócz rzeczy, które opisałem wyżej, dodaj na sam początek funkcji sprawdza() (ciekawa nazwa, btw.) wywołanie funkcji sprawdzImie() oraz sprawdzEmail(). Bo zauważ, że tak jak jest teraz, to ktoś może kliknąć przycisk Wyślij przed wpisaniem czegokolwiek gdziekolwiek -- i funkcje sprawdzImie/Email nie zostaną ani razu wywołane (więc nie zostaną wypisane ich komunikaty o błędach). Wywoływanie tych funkcji na początku sprawdza() załatwi tę sprawę.

Dla porządku, dodaj też na samym początku skryptu, przed definicją jakiejkolwiek funkcji:

var Imie = false;
var Email = false;

Z rzeczy, które opisałem w pierwszej części posta szczególnie ważne dla samego działania kodu jest wyeliminowanie tej literówki w PS-ie.

0

DZIĘKUJE DZIAŁA :)

skorzystałam chyba ze wszystkich wskazówek .
Przepraszam za błędy ortograficzne, wczoraj za późno się za to zabrałam. Pewnie to było tego wynikiem, zmęczona byłam trochę.

zamieszczam kod może komuś się przyda:

<? ?>
<script type="text/javascript">

var Imie = false;
var Email = false;
var Tresc = false;
 
function sprawdza(){
 reset(); sprawdzEmail(); sprawdzImie(); sprawdzTresc(); 
 var ok = Imie && Email && Tresc;
  if (ok){
       document.getElementById("message").innerHTML = "<span style=\"color:191038;\">Wiadomość jest w trakcie wysyłania.</span>";
       return true;
  } else {
       document.getElementById("message").innerHTML = "<span style=\"color:red;\">Wypełnij wszystkie pola prawidłowymi danymi!</span>";
       return false;
  }
}
 function reset(){
        Imie = false;
        Email = false;		
       Tresc = false;
      
    }
function sprawdzImie(){
    var    wyrazenie = /^[_a-zA-Z ]+$/;
    var   imie = document.getElementById("imie").value;
    var   czyImie = wyrazenie.test(imie);
    if (czyImie) {
            document.getElementById("imieKomunikat").innerHTML = "<span style=\"color:#191038;\"></span>";
            Imie = true;
    }  else {
            document.getElementById("imieKomunikat").innerHTML = "<span style=\"color:red;\">Podaj prwaidłowo Swoje imie i nazwisko!</span>";
            Imie = false;
    }
}
    
function sprawdzEmail(){
  var wyrazenie2 = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
  var email = document.getElementById("email").value;
  var czyEmail = wyrazenie2.test(email);
  if (czyEmail) {
        document.getElementById("emailKomunikat").innerHTML = "<span style=\"color:#191038;\"></span>";
         Email = true;
  }  else {
        document.getElementById("emailKomunikat").innerHTML = "<span style=\"color:red;\">Podaj prawidłowy email!</span>";
         Email = false;
  }
}
function sprawdzTresc(){
  var wyrazenie3 = /^[ ]$/;
  var tresc = document.getElementById("tresc").value;      
  if (!tresc) {
        document.getElementById("trescKomunikat").innerHTML = "<span style=\"color:red;\">Treść jest pósta!</span>";
        Tresc = false;
   }  else {
	document.getElementById("trescKomunikat").innerHTML = "<span style=\"color:#191038;\"></span>";
        Tresc = true;
   }
}

kod formularza:

 
<?
         $wyslano = 0;
          include "zabezpieczenia.php";
?>
<form method="post" action="index.php?menu=9" onsubmit="return sprawdza()" onreset="reset()" >

 <tr>
       <td style="width:250px;">* Treść wiadomości:</td>
       <td><textarea name="tresc" style="width: 350px; height: 100px" id="tresc" onkeyup="sprawdzTresc()"></textarea></td>
       <td colspan="2"><label style="width:350px;" id="trescKomunikat"></label> </td>
</tr>
<tr>
       <td style="width:250px;">Temat:</td>
       <td><input type="text" name="temat" style="width: 200px;"></td>
 </tr>
		 
<tr>
       <td style="width:250px;" >* Imię i nazwisko:</td>
       <td><input type="text" name="imie" style="width: 200px;"  id="imie" onkeyup="sprawdzImie()">
       <td colspan="2"><label style="width:350px;" id="imieKomunikat"></label> </td>
</tr>
                             
<tr>
       <td style="width:250px;">* Adres e-mail:</td>
       <td><input type="text" name="email" style="width: 200px;" id="email" onkeyup="sprawdzEmail()">
       <td colspan="4"><label style="width:350px;" id="emailKomunikat"></label></td>
</tr>
<tr>
       <td><input type="submit" name="submit" value="Wyślij">&nbsp;
       <input type="reset" value="Wyczyść"></td>
</tr>
        <label id="message"></label>
</form>

</table>
		* pola wymagane
</div>

    
   
 </script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1