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>

          <!-- 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 样式表...任何帮助将不胜感激。谢谢

4

2 回答 2

1

您的代码是有效的,但是您忘记添加验证插件,您添加了 css 文件,但没有 js 文件,您可以从http://jqueryvalidation.org/下载它,只需添加以下行:

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

我试过了,它的工作原理

于 2013-10-21T14:57:34.820 回答
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不允许您使用数字来开始您的nameid值。 除非您使用的是 HTML5,否则它不是有效的 HTML。请参阅: https ://stackoverflow.com/a/79022/594235

否则,您发布的代码在这个 jsFiddle 中运行良好(jsFiddle 使用 HTML5,这就是它在这里运行的原因)。

http://jsfiddle.net/bpmtf/

谁能给我一个链接,我可以下载一个合适的.css 样式表

您将编写自己的 CSS 来设置页面元素和布局的样式,否则,CSS 与此插件的操作方式完全无关。

于 2013-10-21T16:38:58.430 回答