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について調べたことはありますが、実際にWebサイトでjqueryを使うのは初めてです。あなたの助けは本当に感謝されます.

ありがとう

4

2 に答える 2

1

jquery 検証プラグインの任意のバージョンを含める必要があります

そしてあなたのSCRIPT無効です

  1. その$(document).ready(function() { $().ready.(function() ではない
  2. minlength,maxlengthではなくminlength ,maxlengthを使用する
  3. 検証メッセージは文字列であり、スペースを含む変数ではありません
  4. $("#form1").validate({ $ (".selector").validate({ では なく

これを試して

<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>
<!-- Adding the validation plugin by CDN -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/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 },
                49: {required : true },
                50: {required : true },
                51: {required : true },
                52: {required : true },
            } ,
            messages: {
                40: {required : 'This field is required',minlength : 'No less than 2 characters',
                maxlength : 'no more than 3 characters' },
                41: {required : 'This field is required',minlength : 'No less than 2 characters',
                maxlength :' no more than 3 characters' },
                42: {required : 'This field is required',minlength : 'No less than 2 characters',
                maxlength : 'no more than 3 characters' },
                43:{required :' This field is required',minlength :' No less than 2 characters',
                maxlength : '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>

参照

働くフィドル

于 2013-10-15T10:06:11.280 に答える