0

我正在使用 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()密码上的方法而不是测试错误类的存在，但这会导致递归，直到返回错误。

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

任何帮助，将不胜感激。

4

1 回答 1

2

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

  • 当规则取决于其他东西时。（例如：一个字段只有在勾选复选框时才是“必需的”。）

它不适用于：

  • 每当在字段上满足规则时运行函数。

（是的，正如您所看到的，如果您碰巧将其.valid()用作规则条件的一部分，则会导致递归。）

解决方案是使用keyup事件处理函数以及检查字段状态的方法.valid()。

$(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 事件。

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

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

于 2013-10-25T16:05:28.847 回答