проверка форм с помощиью php и js
Есть такой код. проблема в том что при нажатии "отправить" браузер сразу переходит на сценарий add_student.php, а нужно только после js проверки на корректность данных, введеных в форму.
PHP:
1. <?php
2. //имя сервера
3. $HOST = 'xxx';
4. //имя пользователья и пароль
5. $USER='yyy';
6. $PASS='';
7.
8. //база данных
9. $DB='bd';
10. mysql_connect($HOST,$USER,$PASS) or die("MySQL error");
11. mysql_query ("SET NAMES UTF8");
12. mysql_select_db($DB);
13.
14.
15. ?>
HTML:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <link href="style.css" rel="stylesheet" type="text/css" />
6. <title>Untitled Document</title>
7. </head>
8.
9. <body>
10.
11.
12. <table width="300" height="200" class="main_border" align="center" border="0" cellspacing="0" cellpadding="0">
13. <tr>
14. <td align="center" valign="top">
15. <form action="add_student.php" method="post" name="preview">
16. <div class="form">
17.
18. <p align="left">Студент : <br />
19. <input type="text" name="name" id="name" value="" /> </p>
20. <p align="left">E-mail :<br />
21. <input type="text" name="email" id="email" value="" /></p>
22. <p align="left">Телефон :<br />
23. <input type="text" name="phone" id="phone" value="" /> </p>
24. </div>
25.
26.
27. <p align="left" class="red" id="alert"></p>
28. <input type="hidden" name="PHPSESSID" value="805e740a1ef94886f0ee725597c21845" />
29. <input type="submit" name="submit" value="отправить" onclick="checkForm()" />
30. </form>
31.
32. </td>
33. </tr>
34. </table>
javascript:
1. <script type="text/javascript">
2.
3. function text (str) { return /[0-9_;:'!~?=+<|>]/g.test(str); }
4.
5. function numeric (str) { return /^[0-9-\+\(\)\s]+z/.test(str + "z"); }
6.
7. function mail (str) { return /^[a-z0-9_\.]+@[a-z0-9_\.]+.[a-z]{2,3}$/.test(str); }
8.
9. function checkForm ()
10. {
11. var title;
12. var elem;
13. var dutyField = "Не заполнено поле ";
14. var wrongField = "Неверное значение поля ";
15. var dutyField1 = " должен иметь не менее 7 символов";
16. var check = true;
17.
18. function checkError (field, str)
19. {
20. document.getElementById("alert").innerHTML = str;
21. document.forms.preview.field.focus();
22. check = false;
23. }
24.
25. document.getElementById("alert").innerHTML = "";
26.
27.
28.
29. if (check)
30. {
31. title = '"Студент"';
32. elem = document.preview.name.value;
33. if (elem.length == 0) checkError('name', dutyField + title);
34. else if (text(elem)) checkError('name', wrongField + title);
35. }
36.
37. if (check)
38. {
39. title = '"E-mail"';
40. elem = document.preview.email.value;
41. if (elem.length == 0) checkError('email', dutyField + title);
42. else if (!mail(elem)) checkError('email', wrongField + title);
43. }
44.
45. if (check)
46. {
47. title = '"Телефон"';
48. elem = document.preview.phone.value;
49. if (elem.length == 0) checkError('phone', dutyField + title);
50. if (!numeric(elem)) checkError('phone', wrongField + title);
51. if (elem.length < 7) checkError('phone', title + dutyField1);
52.
53. }
54.
55.
56. if (check) {document.preview.submit();}
57.
58. return check;
59. }
60. </script>
HTML:
1. </body>
2. </html>
|