JQuery Validate select element, не включающий значение по умолчанию

Question

Я пытаюсь проверить элемент Select следующим образом:

<select name="block_name" id="block-name">
 <option value="">Select Block</option>
 <option value="blockA">Block A</option>
 <option value="blockB">Block B</option>
</select>

, что, как правило, не будет проблемой, если правило будет следующим:

rules: {
 block_name: {
   required: true
 }
}

Как я хотел быпросто добавьте class="required" к элементу выбора.Но я использую функцию в правиле следующим образом:

rules: {
 block_name  {
  required: function(element) {
   return $("#blocks").val() >= 2;
        }
    }
}

, которая использует следующее скрытое поле с привязкой данных, которая определяет значение:

<input type="hidden" name="blocks" id="blocks" value="<?php echo $row_rsCurrentUser['blocks']; ?>">

При использовании этой функциив rule class="required" не работает, исключая элемент опции по умолчанию <option value="">Select Block</option>

Как я могу проверить это, но не за исключением опции по умолчанию в качестве выбора?

Заранее спасибо

Answer 1

Я думаю, что вы можете определить новое правило класса, вместо использования встроенного class="required".

$.validator.addClassRules("required_block2", {
    required: function(element) {
        return $("#blocks").val() >= 2;
    }
});

Затем используйте class="required_block2" для этих элементов.

Answer 2

Вы можете добавить все виды проверки в вашей функции:

$("#myform").validate({
  debug: true,
  rules: {
    block_name:  {
      depends: function(element) {
        var blocksIsValid = (Number($("#blocks").val()) >= 2);
        var block_nameIsValid = ($("#block_name").val() !== "");
        $('#output').text('#blocksIsValid:'+blocksIsValid+', #block_nameIsValid: '+block_nameIsValid);
        return blocksIsValid && block_nameIsValid;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myform">
  <select name="block_name" id="block_name" required>
    <option value="">Select Block</option>
    <option value="blockA">Block A</option>
    <option value="blockB">Block B</option>
  </select>
  <input id="blocks" name="blocks" value=""/>
  <input type="submit" value="Validate"/>
  <p id="output"></p>
</form>

Если вы не знакомы с условиями JS, вот несколько советов:

С || (так же, как ИЛИ)одно из условий должно быть истинным;

с && (таким же, как AND) все условия должны быть истинными.

с ! (таким же, как NOT) ваше условие будет перевернуто (истина становится ложной, ложь становится истинной).

Подробнее https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals