Question

使用jQuery Validate，我正在对select和text字段进行条件验证：如果有特定选项（{{1}，则必须填写文本字段（#specialization）从选择字段（<option value="doctor">）

中选择了}

到目前为止一切顺利，这是一份工作副本：https://jsfiddle.net/vzx9paxz/2/

现在，我不喜欢搞乱太多的JS代码，我想利用#job属性。所以，我想直接在HTML代码中评估表达式data-rule-required，将其从Javascript中删除：如果它返回($('#job').val() === 'doctor')，则必须填写true字段，否则它可以是空的

这样的事情：

#specialization

当然这段代码不起作用：我尝试了其他表达式，比如<input type="text" data-rule-required="return ($('#job').val() === 'doctor')" class="form-control" id="specialization" name="specialization">，但没有运气......

Answer 1

如何：使用数据属性进行条件验证

你不能。

data-rule-required="return ($('#job').val() === 'doctor')"

即使您可以在data属性中执行JavaScript，也不能执行 the jQuery Validate plugin cannot interpret it (see the JS errors in the console)。通常，它会在true中查找false或data-rule-required字符串...但它无法执行条件表达式。

换句话说，无论你将data-rule-required的值放在什么位置，jQuery Validate插件都会将其解释为字符串并阻塞除"true"或"false"以外的任何内容。

Answer 2

数据属性无法触发事件。更好地编写一个javascript函数，并通过单击，焦点，调整大小，鼠标...事件来调用它。像：

 <input class="user" name="">

 <script>
  $(".user").focus(function(){
 if($(this).val()=="doctor"){
 // do what ever
  }
  });

Answer 3

OP提出的要求通常是不可能的。但是，在某些简单情况下，可以仅使用数据属性进行条件验证。这是一个示例：

<form action="#" method="post">
    <label for="password">Set new password</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="password-confirm">Confirm password</label>
    <input type="password" id="password-confirm"
        data-rule-equalto="#password"
        data-rule-required="#password:filled">
    <br>
    <input type="submit" value="save">
</form>

实时观看：JSFiddle

它将不需要任何一个密码字段，除非第一个字段为非空白，否则将需要第二个字段。感谢extra selectors provided by jQuery Validate。

其他有用的选择器：:checked，:unchecked，:blank。

如何：使用数据属性进行条件验证

3 个答案: