文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery验证问题- dreamweaver cs.3

问jquery验证问题- dreamweaver cs.3
EN

Stack Overflow用户

提问于 2013-10-15 18:05:26

回答 1查看 234关注 0票数 0

我想在这个页面中使用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>

<script src="../../LocalSites/Unnamed Site 2/jquery.js"></script>

<script>
$.validator.setDefaults({submitHandler: function()  alert("submitted!");
}});
$().ready.(function() 
   $(".selector").validate({rules: {
            40: {
             required : true,
             minlenght : 2,
             maxlenght : 3 },
            41: {
             required : true,
             minlenght : 2,
             maxlenght : 3 },
            42: {
             required : true,
             minlenght : 2,
             maxlenght : 3 },
            43: {
             required : true,
             minlenght : 2,
             maxlenght : 3 },
            44: {
             required : true,
             minlenght : 2,
             maxlenght : 3 },
            45: {
             required : true },
            46: {
             required : true },
            47: {
             required : true },
            48: {
             required : true },
            49: {
             required : true },
            50: {
             required : true },
            51: {
             required : true },
            52: {
             required : true },
             } ,

            messages: {
             40: {
              required : This field is required,
              minlenght : No less than 2 characters,
              maxlenght : no more than 3 characters },
             41: {
              required : This field is required,
              minlenght : No less than 2 characters,
              maxlenght : no more than 3 characters },
             42: {
              required : This field is required,
              minlenght : No less than 2 characters,
              maxlenght : no more than 3 characters },
             43:{
              required : This field is required,
              minlenght : No less than 2 characters,
              maxlenght : no more than 3 characters },
             44: {
              required : A selection is required },
             45: {
              required : This field is required },
             46: {
              required : This field is required },
             47: {
              required : This field is required },
             48: {
              required : This field is required },
             49: {
              required : This field is required },
             50: {
              required : This field is required },
             51: {
              required : This field is required },
             52: {
              required : This field 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" size="1" id="44">
      </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>

我做过一些关于jquery的研究，但这是我第一次真正在网站上使用jquery。您的帮助我们将不胜感激。

谢谢

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2013-10-15 18:10:23

您必须包括验证插件，如http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

有关更多详细信息，请查看http://jqueryvalidation.org/

尝试添加

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

在head部分

你的代码中有很多错误。

要对如何使用jquery验证有一个清晰的概念，请查看以下代码

   <html>
   <head>

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

  <link href="runnable.css" rel="stylesheet" />
  <!-- Load jQuery and the validate plugin -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

  <!-- jQuery Form Validation code -->
  <script>

   // When the browser is ready...
  $(function() {

   // Setup form validation on the #register-form element
   $("#register-form").validate({

    // Specify the validation rules
    rules: {
        firstname: "required",
        lastname: "required",
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 5
        },
        agree: "required"
    },

    // Specify the validation error messages
    messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        email: "Please enter a valid email address",
        agree: "Please accept our policy"
    },

    submitHandler: function(form) {
        form.submit();
     }
    });

  });

  </script>
 </head>
 <body>
  <h1>Register here</h1>

  <!--  The form that will be parsed by jQuery before submit  -->
  <form action="" method="post" id="register-form" novalidate="novalidate">

   <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
   <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
   <div class="label">Email</div><input type="text" id="email" name="email" /><br />
   <div class="label">Password</div><input type="password" id="password" name="password" /><br />
   <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>

  </form>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19378412

复制

相似问题

问jquery验证问题- dreamweaver cs.3
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery验证问题- dreamweaver cs.3EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery验证问题- dreamweaver cs.3
EN