我可以在多个选择列表中验证三个选项之一的存在吗?

时间:2016-05-25 13:07:40

标签: jquery jquery-validate

link to sample page with test form

我遇到导入电子表格的情况,我需要将电子表格中的部分或全部列映射到数据库中的字段,但我想确保至少有一个选择列表选择了三个价格选项中的一个,这是常规价格,销售价格或促销价格。其他选择列表可以选择品牌或型号选项,甚至可以为空白,但至少有一个选择列表必须选择其中一个价格选项。

有没有办法用我在谷歌搜索中找不到的jQuery Validation Plugin来做到这一点?

<form action="" id="frmTest" method="post" name="frmTest">
  <table border="0">
    <tr>
      <td><select name="MapTo_A" id="MapTo_A">
          <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
          <option value="CommonBrandName">Brand</option>
          <option value="SKU">Model</option>
          <option value="MSRP">Regular Price</option>
          <option value="Price">Sell Price</option>
          <option value="Sale">Promo Price</option>
        </select></td>
      <td><select name="MapTo_B" id="MapTo_B">
          <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
          <option value="CommonBrandName">Brand</option>
          <option value="SKU">Model</option>
          <option value="MSRP">Regular Price</option>
          <option value="Price">Sell Price</option>
          <option value="Sale">Promo Price</option>
        </select></td>
      <td><select name="MapTo_C" id="MapTo_C">
          <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
          <option value="CommonBrandName">Brand</option>
          <option value="SKU">Model</option>
          <option value="MSRP">Regular Price</option>
          <option value="Price">Sell Price</option>
          <option value="Sale">Promo Price</option>
        </select></td>
  <td><select name="MapTo_D" id="MapTo_D">
      <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
      <option value="CommonBrandName">Brand</option>
      <option value="SKU">Model</option>
      <option value="MSRP">Regular Price</option>
      <option value="Price">Sell Price</option>
      <option value="Sale">Promo Price</option>
    </select></td>
  <td><select name="MapTo_E" id="MapTo_E">
      <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
      <option value="CommonBrandName">Brand</option>
      <option value="SKU">Model</option>
      <option value="MSRP">Regular Price</option>
      <option value="Price">Sell Price</option>
      <option value="Sale">Promo Price</option>
    </select></td>
  <td><select name="MapTo_F" id="MapTo_F">
      <option value="">&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;
      <option value="CommonBrandName">Brand</option>
      <option value="SKU">Model</option>
      <option value="MSRP">Regular Price</option>
      <option value="Price">Sell Price</option>
      <option value="Sale">Promo Price</option>
    </select></td>
        ...
    </tr>
  </table>
  <p><input type="submit" id="updateNow" name="updateNow" value="Map Columns"></p>
</form>

1 个答案:

答案 0 :(得分:0)

对于您描述的复杂性,您需要使用the .addMethod() method编写自己的自定义规则。只需return true说该字段已经过了#34;验证和false到&#34;失败&#34;验证

可选参数的示例:

jQuery.validator.addMethod("customRule", function(value, element, params) {
    return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));


$('#yourform').validate({
    rules: {
        MapTo_A: {
            customRule: [param1, param2, etc],
            // customRule: true // without parameters
        }
        ....

注意:this.optional(element) ||部分确保此规则不会强制required规则。对于您还希望字段为required的情况,请单独声明required规则。

但是,为了获得最佳用户体验,您应该使用JavaScript动态重写其他select元素&#39;基于其他change元素的select事件的选项。理想情况下,您不希望向用户显示他首先不允许选择的任何选项。