Проверка JQuery - сообщения отображаются неправильно

0

Добрый день,

Мои сообщения проверки корректно отображаются, и я не знаю почему. В моем коде ("сообщения") есть сообщение, которое я хочу отобразить, но по какой-то причине он не будет работать. Я провел некоторое исследование о том, как исправить эту проблему, но не повезло... Вот мой код:

<!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>

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

  <link href="runnable.css" rel="stylesheet" />
  <!-- Load jQuery and the validate plugin -->
  <script src="/EDApp/EDSP/jquery.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<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>

пожалуйста, помогите мне

  • 0
    проверьте на наличие ошибок JavaScript. возможно, у вас есть что-то в консоли. Я потратил время на то, чтобы воспроизвести для вас вашу проблему - jsfiddle.net/q9bnp, похоже, ошибки отображаются нормально
  • 0
    Вы не можете назвать свои поля так. См .: stackoverflow.com/a/79022/594235
Теги:
jquery-validate

2 ответа

0

Ваш doctype...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

http://jsfiddle.net/bpmtf/

Поделиться
0

вы добавили jquery.min.js в свой HTML-код

            <!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>
            <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">

              <link href="runnable.css" rel="stylesheet" />
              <!-- Load jQuery and the validate plugin -->
              <script src="/EDApp/EDSP/jquery.js"></script>
              <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
            <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>
Поделиться
  • 0
    он добавлен локально в HTML
  • 0
    Вы получаете какие-либо ошибки JavaScript? Я заметил, что у вас есть пара лишних запятых в конце ваших списков полей в скрипте проверки, которые не должны быть там, просто интересно, возможно, они исправляют ошибку javascript?
Показать ещё 1 комментарий

Ещё вопросы

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