jQuery Validation 插件，当字段有效时启用复选框 [关闭]

Question

我正在使用 jQuery、jQuery Mobile 和 jQuery Validation 插件

我有一个“密码”字段和一个“记住密码”复选框。

我希望仅在验证密码字段后启用该复选框。

这是 HTML 中的两个字段

<input type="password" name="password" class="submit required" minlength="6" />
<input type="checkbox" name="rememberpassword" value="remember" />

要启用或禁用复选框，我使用 jQuery Mobile 命令

$('[name=rememberpassword]').checkboxradio( "enable" ); and
$('[name=rememberpassword]').checkboxradio( "disble" );

我不知道可以在验证规则中的何处添加此命令。

我尝试在密码字段的验证规则中添加启用/禁用命令，如下所示：

$(form).validate({
      rules: {
        password: {
          required: {
            depends: function(element) {
              console.log('In the password depends');
              if (!$(element).hasClass('error')) {
                $('[name=rememberpassword]').checkboxradio("enable");
              } else {
                $('[name=rememberpassword]').checkboxradio("disable");
              }
              return true;
            }
          }
        }
      }
    });

这种方法的问题是，有效和错误类被添加到元素中，仅在密码字段中的第一个数据输入后才进行验证，因此复选框仍然有效。

我也尝试使用 .valid() 方法验证表单或密码字段，但只要该字段未填充任何内容，这似乎没有任何作用。

我尝试做同样的事情，但在密码上使用.valid() 方法而不是测试错误类的存在，但这会导致递归，直到返回错误。

我没有找到一种方法来检查不会触发完整验证和后续递归的字段的有效性。

任何帮助将不胜感激。

Answer 1

条件规则/函数仅适用于：

• 当规则依赖于其他东西时。 （例如：只有勾选了复选框时，该字段才是“必填项”。）

它不是用于：

• 只要满足某个字段的规则，就运行一个函数。

（是的，如您所见，如果您碰巧使用.valid() 作为规则条件的一部分，则会导致递归。）

---

解决方案是使用keyup 事件处理函数和the .valid() method 来检查字段的状态。

$(document).on('pageinit', function () { // <- DOM ready handler for jQuery Mobile

    // initialize plugin with .validate()
    $('#myform').validate({ 
        // your rules & options
    });

    // fire this function on every key-up event within the password field
    $('input[name="password"]').on('keyup', function () { 
        if ($(this).valid()) {             // <- check if password field is valid
            $('[name="rememberpassword"]')
                .checkboxradio('enable');  // <- enable checkbox
        } else {
            $('[name="rememberpassword"]')
                .checkboxradio('disable')  // <- disable checkbox
                .attr('checked',false)     // <- uncheck checkbox if checked
                .checkboxradio('refresh'); // <- refresh checkbox
        }
    });

});

工作演示：http://jsfiddle.net/6eEBC/

我选择不将这部分作为插件的 onkeyup 回调函数的一部分，因为这将应用于表单上每个字段的每个 keyup 事件。

我还“取消选中”该复选框，因为我想，如果它再次被禁用，您不希望它停留在“选中”状态。

根据the jQuery Mobile docs，您需要在“通过JavaScript 操作复选框”时使用.checkboxradio('refresh') 来更新视觉样式。根据该页面上的示例，它仅在您以编程方式选中/取消选中复选框时适用。