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'
     }
   });  
});

编辑：如果我将卡号移到第一列，则验证有效，但在第二列时无效

http://jsfiddle.net/JqSBC/

4

2 回答 2

2

将表单元素放在表格元素之外。

表单不允许作为 table、tbody 或 tr 的子元素。

于 2012-06-03T21:46:45.300 回答
2

用表单标签包裹你的表格，而不是在第一个 td 中包含表单标签。

#cardInfo在您的原始示例中，表单内部不存在#signup，因此它被忽略。

此外，使用输入元素的名称/id 而不是容器 div。

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

于 2012-06-03T21:47:36.390 回答