Jquery验证消息不工作_Jquery_Jquery Validate

Jquery验证消息不工作

jquery

Jquery验证消息不工作,jquery,jquery-validate,Jquery,Jquery Validate,我想在表单上使用验证消息，但当我单击botton时，什么都没有发生，我也不知道为什么。我已经为这个问题挣扎了一段时间，没有人能真正帮助我。在这一点上，我非常想让它工作。。。这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

我想在表单上使用验证消息，但当我单击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>


模块健康测量
$.validator.setDefaults（{submitHandler:function（）{alert（“submitted！”；}}）；
$（文档）.ready（函数（）{
$（“#表格1”）。验证({
规则：{
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:{必需：true}，
46:{必需：true}，
47:{必需：true}，
48:{required:true}，
51:{必需：true}，
52:{required:true}，
} ,
信息：{
40:{必填项：'您不穿鞋的身高以厘米为单位是必填项'，minlength:'不少于2个字符'，
maxlength:'不超过3个字符'}，
41:{必填项：'您不穿鞋的体重（kg）是必填项，'最小长度：'不少于2个字符'，
maxlength:'不超过3个字符'}，
42:{必填项：'您的臀围（厘米）是必填项'，minlength:'不少于2个字符'，
maxlength:'不超过3个字符'}，
43:{必填项：'您的腰围（厘米）是必填项'，minlength:'不少于2个字符'，
maxlength:'不超过3个字符'}，
44:{required:'需要选择'}，
45:{必需：'需要收缩压mmHg'}，
46:{必需：'需要舒张压mmHg'}，
47:{必需：'需要葡萄糖mmol/l'}，
48:{必需：'需要总胆固醇mmol/l'}，
51:{必需：'需要5分钟的收缩压'}，
52:{必需：'需要舒张压5min'}，
}
});
});
#form1{宽度：400px；}
健康测量
无鞋身高（cm）
无鞋重量（kg）
臀围（厘米）
腰围（厘米）
你在过去的7小时里吃过东西吗？
对
不
收缩压mmHg
舒张压mmHg
葡萄糖mmol/l
总胆固醇mmol/l
英国石油公司5分钟随访
收缩压5分钟
舒张压5分钟

谁能给我发一个链接，我可以在那里下载一个合适的.css样式表。。。任何帮助都将不胜感激。Thanx

您的代码是有效的，但是您忘记添加验证插件，您添加了css文件，但没有添加js文件，您可以从中下载它，只需添加以下行：

我试过了，但效果很好

你忘了在代码中包含插件。我看到了jQuery，但是jQuery验证插件丢失了

<!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
不允许您使用数字来启动
名称
和
id
值。除非您使用的是HTML5，否则它不是有效的HTML。见：

否则，您发布的代码在这个JSFIDLE中运行良好（JSFIDLE使用HTML5，这就是它在这里工作的原因）

谁能给我发一个链接，让我下载一个合适的

.css

样式表

您可以编写自己的CSS来设置页面元素和布局的样式，否则，CSS与该插件的操作方式完全无关

你确定你的问题出在样式表上吗？我真的不明白你的问题。你检查控制台有没有错误？我怀疑问题在于您没有包括jquery验证插件js参考。CSS与jquery验证无关，无法正确运行。重复的~请不要发布重复项。您的

name

和

id

值不能是

，

，等等。；根据您的

doctype

@Wimp，它无效