jQuery Подтвердить выбор нескольких элементов зависит от другого selectbox

Question

У меня есть два окна выбора (роли пользователя и состояния). Если выбранным значением является продажа Rep. Я хочу, чтобы состояния были обязательным. Я пробовал несколько способов, но ничего не получилось. Он работает, если я удаляю «несколько» из поля выбора роли. Что мне не хватает? Любые предложения будут ценны!

<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

Проблема заключается в вас есть опция по умолчанию элемента со значением '', который заставит необходимую проверку в случае нераскрытого множественного выбора, но здесь, так как у вас есть multi выберите требуемый тест, чтобы проверить, выбрано ли по крайней мере одна опция, не выбрана ли опция с непустым значением. Так как выбрано пустое значение, проверка возвращает 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() возвращает массив выбранных значений, так что в вашем случае он возвращает массив, который содержит пустое значение в качестве значения от выбора элемента так val.length > 0 возвращает истину

таким образом, 1 возможное решение, чтобы удалить пустое значение опциона

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

Demo: Fiddle

---

Или вы можете использовать метод хак с использованием шаблонного правила, как

 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 (обратите внимание на пробел) для краткости.