potrzebuję w nim dodać:
1) pole e-mail i jego walidację...
2) kilka pól typu opisowego "Uwagi"... ich wymóg poprawności jest w zasadzie znikomy... chodzi tylko o bezpieczeństwo danych, gdyż w tych polach może się znajdować jakiś długi tekst... ponadto
3) pole typu Uwagi, ale wymagane by w nim znalazło się choć jedno słowo... min. 3 znaki...
PS. jeśli ktoś potrafi przenieść formatowanie do pliku CSS byłbym wdzięczny za pomoc (przykładowe pokazanie co i jak... resztę sam dokończę...)
proszę o pomoc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="style.css" type="text/css" rel="stylesheet" /> <script type='text/javascript'> function validate(type) { switch(type) { case 0: if(CheckPESEL()) { document.getElementById("imie").innerHTML = "<img src='img/tick.gif' /> "; return true; } document.getElementById("imie").innerHTML = "<img src='img/cross.gif' /> "; break; case 1: if(document.getElementById("imie").value.length < 3) { document.getElementById("imie_msg").innerHTML = "<img src='img/cross.gif' /> Podane imię jest zbyt krótkie"; return false; } else { document.getElementById("imie_msg").innerHTML = "<img src='img/tick.gif' /> "; return true } break; case 2: if(document.getElementById("nazwisko").value.length < 3) { document.getElementById("nazwisko_msg").innerHTML = "<img src='img/cross.gif' /> Podane nazwisko jest zbyt krótkie"; return false; } else { document.getElementById("nazwisko_msg").innerHTML = "<img src='img/tick.gif' /> "; return true; } break; case 3: var id = document.getElementById("tozsamosc_typ").value; if(id == 0) { if(!CheckDOWOD()) { return false; } else { return true; } } break; case 4: if(document.getElementById("imie_ojca").value.length < 3) { document.getElementById("imie_ojca_msg").innerHTML = "<img src='img/cross.gif' /> Podane imię ojca jest zbyt krótkie"; return false; } else { document.getElementById("imie_ojca_msg").innerHTML = "<img src='img/tick.gif' /> "; return true;} break; case 5: if(document.getElementById("miejsce_urodzenia").value.length < 3) { document.getElementById("miejsce_urodzenia_msg").innerHTML = "<img src='img/cross.gif' /> Podana nazwa miejscowości jest zbyt krótka"; return false; } else { document.getElementById("miejsce_urodzenia_msg").innerHTML = "<img src='img/tick.gif' /> "; return true;} break; case 6: if(document.getElementById("ulica").value.length < 3) { document.getElementById("ulica_msg").innerHTML = "<img src='img/cross.gif' /> Podana nazwa ulicy jest zbyt krótka"; return false; } else { document.getElementById("ulica_msg").innerHTML = "<img src='img/tick.gif' /> "; return true;} break; case 7: if(document.getElementById("nr_lokalu").value.length < 1) { document.getElementById("nr_lokalu_msg").innerHTML = "<img src='img/cross.gif' /> Podany numer lokalu jest zbyt krótki"; return false; } else { document.getElementById("nr_lokalu_msg").innerHTML = "<img src='img/tick.gif' /> "; return true;} break; case 8: if(!CheckKOD()) { document.getElementById("kod_pocztowy_msg").innerHTML = "<img src='img/cross.gif' /> Podany kod jest nieprawidłowy. Format: XX-XXX"; return false; } else { document.getElementById("kod_pocztowy_msg").innerHTML = "<img src='img/tick.gif' /> (XX-XXX)"; return true;} break; case 9: if(document.getElementById("miejscowosc").value.length < 3) { document.getElementById("miejscowosc_msg").innerHTML = "<img src='img/cross.gif' /> Podana nazwa miejscowosci jest zbyt krótka"; return false; } else { document.getElementById("miejscowosc_msg").innerHTML = "<img src='img/tick.gif' /> "; return true;} break; } return (false); } function CheckTELEFON() { var pattern = /^[0-9]{9}$/ var wynik = str.match(pattern); if(wynik) return true; return false; } function CheckKOD() { var str = document.getElementById("kod_pocztowy").value; var pattern = /^[0-9]{2}\-[0-9]{3}$/; var wynik = str.match(pattern); if(wynik) return true; return false; } function CheckPESEL() { var str = document.getElementById("pesel").value; var pattern = /^[0-9]{11}$/; var wynik = str.match(pattern); if (!wynik) { document.getElementById("pesel_msg").innerHTML = "<img src='img/cross.gif' /> Podany PESEL jest zbyt krótki (Wymagane 11 cyfr)"; return false; } intSum = 0; for (var i = 0;i < 10; i++) { intSum += arrSteps[i] * str.charAt(i); } int = 10 - intSum % 10; var intControlNr = 0; if(int != 10) intControlNr = int; if (intControlNr == str.charAt(10)) { document.getElementById("pesel_msg").innerHTML = "<img src='img/tick.gif' /> "; return true; } document.getElementById("pesel_msg").innerHTML = "<img src='img/cross.gif' /> Podany PESEL może być błędny"; return false; } function CheckDOWOD(str) { var str = document.getElementById("dokument_tozsamosci").value.toUpperCase(); var pattern = /^[A-Z]{3}[0-9]{6}$/ var wynik = str.match(pattern); if(!wynik) { document.getElementById("tozsamosc_msg").innerHTML = "<img src='img/cross.gif' /> Podany numer dowodu jest błędny."; return false; } for(var i = 0; i<10; i++) { arrstr[i] = str.charAt(i); if(i < 3) arrstr[i] = str.charAt(i).charCodeAt(0) - 55; } var intSum = 0; for (var i = 0; i < 10; i++) { intSum += arrSteps[i] * arrstr[i]; } var int = intSum % 10; var intControlNr = 0; if(int != 10) var intControlNr = int; if (intControlNr == arrstr[3]) { document.getElementById("tozsamosc_msg").innerHTML = "<img src='img/tick.gif' />"; return true; } else { document.getElementById("tozsamosc_msg").innerHTML = "<img src='img/cross.gif' /> Podany numer dowodu jest nieprawidłowy"; return false; } } function sprc() { if(document.getElementById("spr").checked) { document.getElementById("pesel").disabled=false; document.getElementById("imie").disabled=false; document.getElementById("nazwisko").disabled=false; document.getElementById("tozsamosc_typ").disabled=false; document.getElementById("dokument_tozsamosci").disabled=false; document.getElementById("imie_ojca").disabled=false; document.getElementById("miejsce_urodzenia").disabled=false; document.getElementById("ulica").disabled=false; document.getElementById("nr_lokalu").disabled=false; document.getElementById("kod_pocztowy").disabled=false; document.getElementById("miejscowosc").disabled=false; } else { document.getElementById("pesel").disabled=true; document.getElementById("imie").disabled=true; document.getElementById("nazwisko").disabled=true; document.getElementById("tozsamosc_typ").disabled=true; document.getElementById("dokument_tozsamosci").disabled=true; document.getElementById("imie_ojca").disabled=true; document.getElementById("miejsce_urodzenia").disabled=true; document.getElementById("ulica").disabled=true; document.getElementById("nr_lokalu").disabled=true; document.getElementById("kod_pocztowy").disabled=true; document.getElementById("miejscowosc").disabled=true; } } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
ciąg dalszy
<body onLoad="sprc();"> <?php $arrOfErrors; $arrOfColors; function CheckPESEL($str) { { return false; } $intSum = 0; for ($i = 0; $i < 10; $i++) { $intSum += $arrSteps[$i] * $str[$i]; } $int = 10 - $intSum % 10; $intControlNr = ($int == 10)?0:$int; if ($intControlNr == $str[10]) { return TRUE; } return FALSE; } function CheckDOWOD($str) { $strarr; { return false;} { return false;} for($i = 0; $i<10; $i++) { if($i < 3) $strarr[$i] = ord($str[$i]) - 55; else $strarr[$i] = $str[$i]; } $intSum = 0; for ($i = 0; $i < 10; $i++) { $intSum += $arrSteps[$i] * $strarr[$i]; } $int = $intSum % 10; $intControlNr = ($int == 10) ? 0 : $int; if ($intControlNr == $str[3]) { return TRUE; } return FALSE; } function validate($field, $type, $val = 0) { switch($type) { case 'min': return TRUE; break; case 'tel': if(CheckTELEFON($_POST[$field])) return TRUE; break; case 'kod': if(CheckKOD($_POST[$field])) return TRUE; break; case 'pesel': if(CheckPESEL($_POST[$field])) return TRUE; break; case 'id': switch($val) { case '0': if(CheckDOWOD($_POST[$field])) return TRUE; break; } } return FALSE; } function CheckTELEFON($str) { return false; return true; } function CheckKOD($str) { return false; return true; } if($_POST['spr']) { $valid = TRUE; if(!validate('pesel', 'pesel')) { $arrOfErrors['pesel_msg'] = 'Pesel może być błędny lub zbyt krótki'; $valid = FALSE; $arrOfColors[0] = 1; } else $arrOfColors[0] = -1; if(!validate('imie', 'min', 3)) { $arrOfErrors['imie_msg'] = 'Imie wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[1] = 1; } else $arrOfColors[1] = -1; if(!validate('nazwisko', 'min', 3)) { $arrOfErrors['nazwisko_msg'] = 'Nazwisko wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[2] = 1; } else $arrOfColors[2] = -1; if(!validate('dokument_tozsamosci', 'id', $_POST['tozsamosc_typ'])) { $arrOfErrors['tozsamosc_msg'] = 'Podany numer dowodu jest błędny'; $valid = FALSE; $arrOfColors[3] = 1; } else $arrOfColors[3] = -1; if(!validate('imie_ojca', 'min', 3)) { $arrOfErrors['imie_ojca_msg'] = 'Imie ojca wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[4] = 1; } else $arrOfColors[4] = -1; if(!validate('miejsce_urodzenia', 'min', 3)) { $arrOfErrors['miejsce_urodzenia_msg'] = 'Miejsce urodzenia wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[5] = 1; } else $arrOfColors[5] = -1; if(!validate('ulica', 'min', 3)) { $arrOfErrors['ulica_msg'] = 'Ulica wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[6] = 1; } else $arrOfColors[6] = -1; if(!validate('nr_lokalu', 'min', 1)) { $arrOfErrors['nr_lokalu_msg'] = 'Numer lokalu wymaga minimum 1 znaku'; $valid = FALSE; $arrOfColors[7] = 1; } else $arrOfColors[7] = -1; if(!validate('kod_pocztowy', 'kod')) { $arrOfErrors['kod_pocztowy_msg'] = 'Kod pocztowy nieprawidłowy'; $valid = FALSE; $arrOfColors[8] = 1; } else $arrOfColors[8] = -1; if(!validate('miejscowosc', 'min', 3)) { $arrOfErrors['miejscowosc_msg'] = 'Miejscowosc wymaga minimum 3 znaków'; $valid = FALSE; $arrOfColors[9] = 1; } else $arrOfColors[9] = -1; /*if(!validate('telefon', 'tel')) { $arrOfErrors['telefon_msg'] = 'Podany numer jest nieprawidłowy. Pamiętaj o numerze kierunkowym'; $valid = FALSE; }*/ if($valid) { //Wysylanie maila } }
i końcówka...
?> <form id="formularz" class="formularz" action="form.php" method="post"> <input type="checkbox" name="spr" id="spr" <?php if($_POST['spr']){echo 'checked=checked ';} ?>onClick="sprc();" style="position:relative;margin:0px auto;left:290px" ><span style="left:300px;position:relative;"> Zapoznałem/-am się z regulaminem.</span> <div style="width:600px;position:relative;margin:0px auto;background:#F2F2F2;top:12px;"> <span style="position:relative;display:block;top:0px;text-align:center;background:#0066FF;color:white;font-weight:bold;width:600px;height:22px;left:0px;">Wymagane dane</span> <table > <tr> <td align="right" width="150"> <label>PESEL:</label> </td> <td align="center" width="150"> <input style="width: 150px;font-size:12px;color:#555555;" maxlength="11" onblur="validate(0);" id="pesel" name="pesel" type="text" disabled="true" value="<?php echo $_POST['pesel'] ?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Imię:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="imie" onblur="validate(1);" name="imie" type="text" disabled="true" value="<?php echo $_POST['imie'];?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Nazwisko:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="nazwisko" name="nazwisko" onblur="validate(2);" value="<?php echo $_POST['nazwisko'];?>" type="text" disabled="true"> </td> </tr> <tr> <td align="right" width="150"> <label>Dokument tożsamości:</label> </td> <td align="center" width="150"> <select style="width: 156px; font-size: 12px; color: #555555;" id="tozsamosc_typ" name="tozsamosc_typ" disabled="true"> <option value="0">dowód osobisty</option> <option value="1">Prawo jazdy</option> <option value="2">Paszport</option> </select> </td> </tr> <tr> <td align="right" width="150"> <label>Seria i Numer:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="dokument_tozsamosci" onblur="validate(3);" name="dokument_tozsamosci" type="text" disabled="true" value="<?php echo $_POST['dokument_tozsamosci'];?>" > </td> <td style="position:relative;left:5px;font-size:12px; color:#CC3300"><span id="tozsamosc_msg" style="width:120px;font-size:12px; color:#CC3300;position:relative;left:0px;"><?php if($arrOfColors[3] < 0)echo "<img src='img/tick.gif' />"; ?><?php if($arrOfColors[3] > 0) echo "<img src='img/cross.gif' /> "; ?><?php echo $arrOfErrors['tozsamosc_msg'] ?></span></td> </tr> <tr> <td align="right" width="150"> <label>Imię ojca:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="imie_ojca" name="imie_ojca" onblur="validate(4);" type="text" disabled="true" value="<?php echo $_POST['imie_ojca'];?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Miejsce urodzenia:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="miejsce_urodzenia" name="miejsce_urodzenia" onblur="validate(5);" type="text" disabled="true" value="<?php echo $_POST['miejsce_urodzenia'];?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Ulica:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="ulica" name="ulica" onblur="validate(6);" type="text" disabled="true" value="<?php echo $_POST['ulica'];?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Nr domu/lokalu:</label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="nr_lokalu" name="nr_lokalu" type="text" onblur="validate(7);" disabled="true" value="<?php echo $_POST['nr_lokalu'];?>"> </td> </tr> <tr> <td align="right" width="150"> <label>Kod pocztowy: </label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="kod_pocztowy" name="kod_pocztowy" type="text" onblur="validate(8);" disabled="true" value="<?php echo $_POST['kod_pocztowy'];?>"> </td> <td style="position:relative;left:5px;font-size:12px; color:#CC3300"><span id="kod_pocztowy_msg" style="width:120px;font-size:12px; color:#CC3300;position:relative;left:0px;"><?php if($arrOfColors[8] < 0)echo "<img src='img/tick.gif' />"; ?><?php if($arrOfColors[8] > 0) echo "<img src='img/cross.gif' /> "; ?><?php echo $arrOfErrors['kod_pocztowy_msg'] ?> (XX-XXX)</span></td> </tr> <tr> <td align="right" width="150"> <label>Miejscowość: </label> </td> <td align="center" width="150"> <input style="width: 150px; font-size: 12px; color: #555555;" id="miejscowosc" name="miejscowosc" onblur="validate(9);" type="text" disabled="true" value="<?php echo $_POST['miejscowosc'];?>"> </td> </tr> <tr> <td> <input class="submit" type="submit" value="wyślij" style="position:relative;left:156px;top:-3px;width:150px;"> </td> </tr> </table> </div> </form> </body> </html>