验证验证功能中的字段

时间:2018-09-07 12:54:39

标签: jquery jquery-validate unobtrusive-validation

这与以下问题有关:Validation for selecting a minimum and maximum

因此,我有两个字段,一个是用户必须输入的最小值,一个是用户必须输入的最大值。我需要在两个字段上都验证它们是正确的最小值<最大值。

我有以下代码

$.validator.addMethod('lessthan', function (value, element, params) {
  var greatElement, validator, less, greatText, isEqualValid, great;

  greatElement = $(params[0]);
  // This code does not work
  //validator = $( greatElement[0].form ).validate();
  //validator.element(greatElement);

  // This code does not work
  greatElement.valid();

  // validate the current value 
  // missing for brevety  
});

$.validator.unobtrusive.adapters.add('lessthan', ['compareto', 'isequalvalid'], function (options) {
  var element = $(options.form).find('input[name=' + options.params['compareto'] + ']')[0];
  options.rules['lessthan'] = [element, options.params['isequalvalid']];
  options.messages['lessthan'] = options.message;
});

但是,当我尝试验证当前字段的另一个字段时,即使aria-invalid不是true,也不会删除input-validation-error类。

如何触发验证功能中其他字段的验证?

更新 我应该提到的是,我需要解决的情况是在更改其中一个字段(键或丢失焦点)时执行验证。

示例:我的最小分值为2,最大为5。 我将最小值更改为23,这两个字段都无效,并与它们关联了错误类别 我将最小值更改为3,只有最大值字段变为有效。即使验证函数返回的有效值,最小值字段仍然无效。

1 个答案:

答案 0 :(得分:0)

进一步调查后,我发现了我的问题。看来,当您在内部调用validateator.element函数时,它会设置属性currentElements。因此,基本上,您正在更改正在验证的当前元素。

所以为了解决我的问题,我将currentElements设置回被验证的元素

$.validator.addMethod('lessthan', function (value, element, params) {
  var greatElement, validator, less, greatText, isEqualValid, great;

  greatElement = $(params[0]);
  validator = $( greatElement[0].form ).validate();
  validator.element(greatElement);
  // THIS IS THE LINE ADDED
  validator.currentElements = $(element);

  // validate the current value 
  // missing for brevety  
});

$.validator.unobtrusive.adapters.add('lessthan', ['compareto', 'isequalvalid'], function (options) {
  var element = $(options.form).find('input[name=' + options.params['compareto'] + ']')[0];
  options.rules['lessthan'] = [element, options.params['isequalvalid']];
  options.messages['lessthan'] = options.message;
});

您当然可以在调用validator.element之前获取之前的currentElements,并在调用后将其设置回原位。

对于组,可能有另一种选择,但是html5标签似乎不支持组,因此实现起来可能会比较棘手。

使用正确的解决方案进行更新

由于我没有使用form.validate(settings),并且html5标记不支持组,所以我必须实现另一种解决方案:

$(document).ready(function () {
  $('[data-val-lessthan-groupname]').each(function () {
     var validator = $(this.form).validate();
     validator.groups[this.name] = $(this).data('val-lessthan-groupname');
     validator.invalid[this.name] = true;
  });
});

因此,基本上,我正在为最小和最大设置组名。在准备好的文档中,我将获取验证器并为表单元素设置组名。另外,我正在设置该元素有效,否则将仅在该元素被“验证”之后执行验证(在控件中设置焦点,并失去对焦点的关注或提交)[似乎该组仅在中使用required_from_groups开发请注意,如果其他字段的值已更改,它会对其进行验证]