0

検証の一部しか機能しないという問題があり、どこに問題があるのか​​ わかりません。このページでは、住所、都市、郵便番号、およびクレジット カードの検証がありますが、クレジット カードの検証は機能しません。

html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Billing Information</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="test.js"></script>

<style type="text/css">
    .error {
    background-color: #ffc;
    border: 1px solid red;
  }
</style>
</head>

<body>
<table border='1'>

  <tr>
    <td>
      <form action="signin.html" id="signup">
      <p>
        <label for="name">Address:</label>
        <input type="text" name="address" id="address" />
      </p>

      <p>
        <label for="name">City: </label>
        <input type="text" name="city" id="city" />
      </p>

      <p>
        <label for="name">ZIP Code:</label>
        <input type="text" name="zip" id="zip" size='3'/>
      </p>

    </td>

    <td>
        <p><b>What is your preferred billing method?</b></p>

      <input type="radio" name="payment" id="ccard" value="cc" />
      <label for="cCard">Credit Card</label><br />

      <div id="cardInfo">
        <!-- doesn't work here -->
        <label for="name">Card Number: </label>
        <input type="text" name="cnum" id="cnum" size='15' /> <br />

        <label for="name">Expiration Date:</label>
        <input type="text" name="exp" id="exp" size='4' />
      </div>

    </td>
    <td>
      <p align='center'>
        <input type="submit" id='submit'>
      </p>
    </td>
    </form>
  </tr>
</table>
</body>
</html>

js:

$(function() {

     // validations using plugin
   $('#signup').validate({
     rules: {
       address: 'required',
       city: 'required',
       zip: {
         required:true,
         digits:true,
         minlength:5,
         maxlength:5
       },
       cnum: 'required'
     }
   });  
});

編集:カード番号を最初の列に移動すると、検証は機能しますが、2 列目にある場合は機能しません

http://jsfiddle.net/JqSBC/

4

2 に答える 2

2

form 要素を table 要素の外に置きます。

フォームをテーブル、tbody、または tr の子要素にすることはできません。

于 2012-06-03T21:46:45.300 に答える
2

最初の td 内にフォーム タグを含めるのではなく、フォーム タグでテーブルをラップします。

#cardInfo元の例ではフォーム内に存在しない#signupため、無視されます。

また、コンテナ div ではなく、入力要素の名前/ID を使用します。

http://jsfiddle.net/JqSBC/3/

于 2012-06-03T21:47:36.390 に答える