Сообщение проверки Jquery не работает

0

Я хочу использовать сообщения проверки в форме, но когда я нажимаю на botton, ничего не происходит, и я не знаю, почему. Некоторое время я боролся с этой проблемой, и никто не мог мне помочь. Я отчаялся в этот момент, чтобы заставить это работать... Вот мой код:

 <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Module Health Measurements</title>

          <!-- Load jQuery and the validate plugin -->
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

        <script>
            $.validator.setDefaults({submitHandler: function() { alert("submitted!");}});
            $(document).ready(function() {
               $("#form1").validate({
                    rules: {
                        40: {required : true, minlength : 2, maxlength : 3 },
                        41: {required : true, minlength : 2, maxlength : 3 },
                        42: {required : true, minlength : 2, maxlength : 3 },
                        43: {required : true, minlength : 2, maxlength : 3 },
                        44: {required : true, minlength : 2, maxlength : 3 },
                        45: {required : true },
                        46: {required : true },
                        47: {required : true },
                        48: {required : true },
                        51: {required : true },
                        52: {required : true },
                    } ,
                    messages: {
                        40: {required : 'Your height in cm without shoes is required', minlength : 'No less than 2 characters',
                        maxlength : 'No more than 3 characters' },
                        41: {required : 'Your weight in kg without shoes is required', minlength : 'No less than 2 characters',
                        maxlength : 'No more than 3 characters' },
                        42: {required : 'Your hip circumference in cm is required', minlength : 'No less than 2 characters',
                        maxlength : 'No more than 3 characters' },
                        43:{required : 'Your waist circumference in cm is required', minlength :' No less than 2 characters',
                        maxlength : 'No more than 3 characters' },
                        44: {required : 'A selection is required' },
                        45: {required : 'Systolic blood pressure mmHg is required' },
                        46: {required : 'Diastolic blood pressure mmHg is required' },
                        47: {required : 'Glucose mmol/l is required' },
                        48: {required : 'Total Cholesterol mmol/l is required' },
                        51: {required : 'Systolic blood pressure 5min is required' },
                        52: {required :' Diastolic blood pressure 5min is required' },
                    }
                });
            });
        </script>

        <style type="text/css">
        #form1{ width:400px;}
        </style>

        </head>
        <body>

        <form id="form1" name="form1" method="post" action="">

        <table width="800" border="1">
          <tr>
            <td colspan="2" bgcolor="#5ACDC7">Health Measurements</td>
          </tr>
          <tr>
            <td width="636">Height in cm without shoes</td>
            <td width="148"><label>
              <input name="40" type="text" id="40" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Weight in kg without shoes</td>
            <td><label>
              <input name="41" type="text" id="41" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Hip circumference in cm</td>
            <td><label>
              <input name="42" type="text" id="42" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Waist circumference in cm</td>
            <td><label>
              <input name="43" type="text" id="43" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Have you eaten in the last 7 hours?</td>
            <td><label>
              <select name="44" id="44">
                <option>Yes</option>
                <option>No</option>
              </select>
            </label></td>
          </tr>
          <tr>
            <td>Systolic blood pressure mmHg</td>
            <td><label>
              <input name="45" type="text" id="45" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Diastolic blood pressure mmHg</td>
            <td><label>
              <input name="46" type="text" id="46" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Glucose mmol/l</td>
            <td><label>
              <input name="47" type="text" id="47" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Total Cholesterol mmol/l</td>
            <td><label>
              <input name="48" type="text" id="48" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td colspan="2" bgcolor="#5ACDC7">BP 5 Minute Follow-up</td>
          </tr>
          <tr>
            <td>Systolic blood pressure 5 min</td>
            <td><label>
              <input name="51" type="text" id="51" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>Diastolic blood pressure 5 min</td>
            <td><label>
              <input name="52" type="text" id="52" size="7" maxlength="7" />
            </label></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><label>
              <input type="submit" name="button1" id="button1" value="Submit" />
            </label></td>
            <td>&nbsp;</td>
          </tr>
        </table>

        </form>

        </body>
        </html>

Может ли кто-нибудь отправить мне ссылку, где я могу загрузить правильную таблицу стилей.css... Любая помощь будет действительно оценена. Thanx

  • 2
    Вы уверены, что ваша проблема с таблицей стилей? Я не очень понимаю ваш вопрос.
  • 0
    Вы проверили консоль на наличие ошибок? Я подозреваю, что проблема в том, что вы не включили ссылку js плагина jquery validate.
Показать ещё 3 комментария
Теги:
jquery-validate

2 ответа

1

Ваш код действителен, но вы забыли добавить плагин проверки, вы добавили файл css, но не файл js, вы можете сбросить его с http://jqueryvalidation.org/ и просто добавить строку:

<script src="js/jquery.validate.min.js"></script>

Я попробовал, и его работа

Поделиться
  • 0
    Я попробовал это и не повезло = (
  • 0
    @WimpieBrits, файл также должен быть загружен на ваш сервер в месте, указанном значением src .
0

Вы забыли включить плагин в свой код. Я вижу jQuery, но плагин jQuery Validate отсутствует...

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Module Health Measurements</title>

        <!-- Load jQuery and the validate plugin -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Тем не менее, ваш doctype не позволяет вам использовать числа, чтобы начинать ваши name и значения id. Это недействительный HTML, если вы не используете HTML5. См. qaru.site/questions/693/...

В противном случае ваш код, как вы его разместили, отлично работает в этом jsFiddle (jsFiddle использует HTML5, поэтому он работает здесь).

http://jsfiddle.net/bpmtf/

Может ли кто-нибудь отправить мне ссылку, где я могу загрузить правильную таблицу стилей .css

Вы должны написать свой собственный CSS для стилизации элементов и макета страницы, иначе CSS не имеет абсолютно никакого отношения к тому, как работает этот плагин.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню