Question

我有两个选择框（用户角色和状态）。如果角色选择的值是销售代表。我希望状态是必填字段。我尝试了几种方法，但没有任何效果。如果我删除＆＃34;倍数＆＃34;来自角色选择框。我错过了什么？任何建议将不胜感激！

<select id="role" class="form-control" name="role">
   <option value="2">Sale Representative</option>
   <option value="3">Manager</option>
</select>

<select class="form-control" id="saleState" name="saleState" multiple>
   <option value="" selected>-- N/A ---</option>
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
</select>

这是我的剧本

$("#newUserForm").validate({
rules: {
  fName: "required",
  lName: "required",
  saleState: {
    required: function(element){
      if($("#role").val() == 2){
        return true;
      }else{
        return false;
      }
    }
  }
},
messages:{
  fName: "Enter your first name",
  lName: "Enter your last name",
  saleState: {
    required: "select state for sale rep."
  }
},
submitHandler: function(form) {
  form.submit();
}
});

Answer 1

问题是你有一个值为''的默认选项元素，在非多选的情况下将强制执行所需的验证，但是这里因为你有多选所需的测试是检查是否有选择至少一个选项，而不是选择非空值选项。因此，由于选择了空值，验证将返回true。

required: function( value, element, param ) {
    // check if dependency is met
    if ( !this.depend(param, element) ) {
        return "dependency-mismatch";
    }
    if ( element.nodeName.toLowerCase() === "select" ) {
        // could be an array for select-multiple or a string, both are fine this way
        var val = $(element).val();
        return val && val.length > 0;
    }
    if ( this.checkable(element) ) {
        return this.getLength(value, element) > 0;
    }
    return $.trim(value).length > 0;
}

如果您看到上面的验证规则，在多选元素的情况下.val（）将返回一个选定值的数组，因此在您的情况下，它将返回一个包含空值的数组作为select元素的值所以val.length > 0将返回true

因此，一种可能的解决方案是删除空选项值

<select class="form-control" id="saleState" name="saleState" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>

演示：Fiddle

或者你可以使用像

这样的模式规则的hack方法

        saleState: {
            required: function (element) {
                return $("#role").val() == 2
            },
            pattern: {
                param: /.+/,
                depend: function (element) {
                    return $("#role").val() == 2
                }
            }
        }

演示：Fiddle

另一种可能的解决方案是编写自定义规则

Answer 2

一个更简单的解决方案是让"required"成为一个只有在设置了正确的角色后才能通过的选择器。

rules: {
  fName: "required",
  lName: "required",
  saleState: {
    required: "select[name='role'] option[value='2']:selected"
  }
}

在您的情况下，为简洁起见，选择器可简化为#role [value='2']:selected（注意空格）。

jQuery验证多个select select取决于另一个selectbox

2 个答案: