使用 jQuery 验证对条件应用验证

Question

早上好伙计们，我想知道你是否可以帮助我解决这个问题：当另一个输入值满足条件时，我正在根据需要对 select 元素应用验证。为此，我正在使用验证 jQuery 插件。这是伪代码：if(textbox == "valueX"){mySelectEelement is required;}（意味着我必须从 select 元素中选择一个值。）。因此，出于某种原因，select 元素未采用我想要应用的验证。

请查看我为此目的在 Plunker 创建的完整示例代码：

<html lang="en">
<head>
 <title></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$( function() {
$.validator.setDefaults({
      //debug: true,
      success: "valid"
    });

    $( "#myform" ).validate({
      rules: {
        borough: {
              required: false
        }
      }
    });

    $('#state').on('change', function () {
    if ($(this).val().toUpperCase() == "NY" || $(this).val().toUpperCase() == "NEW YORK") {
        $('#borough').rules('add', {
            required: true
        });
    } else{
       $('#borough').rules('remove');
    }
});    
} );
</script>

</head>
<body>
<form id="myform">
<div>
<p id="pid"></p>
<input id='text' type='text' value='other'/>
</div>
<br/>
 <input type="text" id="state" name="state"  />

  <select name="borough" id="borough">
  <option value="" select="selected"></option>
  <option value="Staten Island">Staten Island</option>
  <option value="Brooklyn">Brooklyn</option>
  <option value="Queens">Queens</option>
  <option value="NY">NY</option>
  </select>
 </form></body> </html>

Answer 1

无需外部处理程序和函数。您可以在 rules 对象中的 required 下使用 depends 属性来包含您的条件逻辑...

$("#myform").validate({
    rules: {
        borough: {
            required: {
                depends: function(element) {
                    if ($('#state').val().toUpperCase() == "NY" || $('#state').val().toUpperCase() == "NEW YORK") {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }
    }
});

演示：jsfiddle.net/ubkb0pmd/

在没有 depends 的情况下也能正常工作......

$("#myform").validate({
    rules: {
        borough: {
            required: function(element) {
                if ($('#state').val().toUpperCase() == "NY" || $('#state').val().toUpperCase() == "NEW YORK") {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
});

演示 2：jsfiddle.net/ubkb0pmd/1/

使用 jQuery 验证对条件应用验证

Applying validation on condition using jQuery Validate

jquery

jquery-validate