需要 jquery 验证的 jquery tokeninput

Question

我有一个带有两个令牌输入文本框的表单 (ASP.NET MVC)。我还使用jquery.validate() 函数来验证这两个字段都是必需的。

我的问题是，所需的规则不适用于两个令牌输入字段中的 第一个（不管它是哪个；我测试了翻转这两个字段。）。

我确保将ignore = '' 设置为允许隐藏字段，因为令牌输入基本上将字段更改为无序列表和隐藏输入字段。

这真的很奇怪，但我真的很想要求这两个字段。 有什么想法吗？

这是我的代码：

HTML 代码：

<form id="SendPOSettingsForm" method="post" name="SendPOInfo" action="/po/SendPOToVendor/">
  <div>
    <table cellpadding="2">
      <tr>
        <td><input type="checkbox" class="sendviagroup" name="sendViaEmail" id="sendViaEmail" value="Y" @emailChecked /> <b>Email To:</b> &nbsp;&nbsp;&nbsp;</td>
        <td>
          <input type="text" name="sendPOEmailTo" id="sendPOEmailTo" style="font-family: arial; font-size:11px;"  />
          <input type="hidden" name="sendPOEmailTo_List" id="sendPOEmailTo_List" value="@emailTo" />
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" class="sendviagroup" name="sendViaFax" id="sendViaFax" value="Y" onchange="UpdateAttnVisibility(this.checked);" @faxChecked /> <b>Fax To:</b> &nbsp;&nbsp;&nbsp;</td>
        <td>
          <input type="text" name="sendPOFaxTo" id="sendPOFaxTo" style="font-family: arial; font-size:11px;" />
          <input type="hidden" name="sendPOFaxTo_List" id="sendPOFaxTo_List"  value="@faxTo" />
        </td>
      </tr>
      <tr>
        <td><b>Subject:</b> &nbsp;&nbsp;&nbsp;</td>
        <td><input type="text" id="sendSubject" name="sendSubject" style="font-family: arial; font-size:11px; width:600px; height:25px;" /></td>
      </tr>
      <tr>
        <td valign="top"><b>Message:</b> &nbsp;&nbsp;&nbsp;</td>
        <td><textarea rows="10" cols="60" id="sendBody" name="sendBody" style="font-family: arial; font-size:11px;"></textarea></td>
      </tr>
    </table>
  </div>
  <div class="actions">
    <br />
    <input type="submit" id="bSendPO" value="&nbsp;&nbsp;Send&nbsp;&nbsp;" class="orangeButton2" style="font-weight:bold;" />
    &nbsp;&nbsp;
    <input type="button" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="CancelSendPO();" class="orangeButton2" style="font-weight:bold;" />
    <ul class="errorclass" id="errorsummary"></ul>
  </div>
</form>

脚本代码：

$("#sendPOEmailTo").tokenInput("/Admin/Cron/GetVendorContactEmails.aspx?v=" + vendorNo, {
  theme: "facebook",
  preventDuplicates: true,
  allowFreeTagging: true
});

$("#sendPOFaxTo").tokenInput("/Admin/Cron/GetVendorContactFaxes.aspx?v=" + vendorNo, {
  theme: "facebook",
  preventDuplicates: true,
  allowFreeTagging: true
});

var formValidator = $("#SendPOSettingsForm").validate({
  ignore: "",
  rules: {
    sendPOFaxTo: {
      required: "#sendViaFax:checked" //only required if sendViaFax is checked
    },
    sendPOEmailTo: {
      required: "#sendViaEmail:checked" //only required if sendViaEmail is checked
    },
    sendSubject: {
      required: true
    },
    sendViaEmail: {
      require_from_group: [1, ".sendviagroup"]
    },
    sendViaFax: {
      require_from_group: [1, ".sendviagroup"]
    }
  },
  submitHandler: function (form) {
    //alert("is successful, no problems");
    form.submit();
  }
});

当我对此进行测试时，选中“传真”复选框但将“传真至”文本框留空即可。这给了我一条错误消息。但是，选中“电子邮件”复选框但将“电子邮件收件人”文本框留空会提交表单而不会给我一个错误！ 如果我更改 HTML 的顺序并将两个传真输入放在电子邮件输入之前，则 FAX TO (sendPOFaxTo) 需要规则中断，而 EMAIL (sendPOEmailTo) 需要规则有效。

有什么建议吗？

Answer 1

引用 OP：

“如果我更改 HTML 的顺序并将两个传真输入放在电子邮件输入之前，那么传真到 (sendPOFaxTo) 所需的规则中断，而电子邮件 (sendPOEmailTo) 所需的规则有效。 "

您正在使用 require_from_group 方法描述已知错误/问题的症状，该方法导致页面上的某些其他输入被忽略，具体取决于它们的位置。

解决方法是确保您使用的是最新版本的 jQuery 验证插件及其 additional-methods.js 文件，即 1.11.1。

---

此外，禁用ignore 选项的正确方法是，不要将其设置为''，而是将其设置为[]。看到这个答案：https://stackoverflow.com/a/8565769/594235

ignore: []