时间戳

首页 > 解决方案 > jQuery Validation 验证元素，即使设置为“required: false”

jquery - jQuery Validation 验证元素，即使设置为“required: false”

问题描述

我的表单上有一个不需要的复选框，我在我的规则中将其设置为必需的“false”，但它仍在验证并向父级添加一类“错误状态”。不确定是否有办法只对这个单一元素进行强制验证？

HTML：

 <div class="form__input-row row--flex">
          <div class="form-field row--flex">          
            <input id="copay-checkbox" type="checkbox" name="checkbox_eligible" class="form-input--checkbox">
            <label class="form-label--opt-in row--flex align--flex-start">
              <div class="opt-in__pseudo-input"></div>
              <span class="form-label--opt-in__text">
                I would like to receive a Card.               
              </span>
            </label>
          </div>
        </div>

jQuery：

$("#cardForm").validate({
    rules :{
     checkbox_eligible: {
      required: false,
    },
  },
errorPlacement: function (error, $element) {
    var inputType = $element.attr('type'),
      $parentField = $element.closest('.form-field');

    if (inputType === 'checkbox') {
      $parentField.addClass('error-state');
      $parentField.append(error);
    } else if (inputType === 'radio') {
      error.insertAfter($parentField);
    } else {
        $parentField.append(error);
      }
    } else {
      error.insertAfter($element);
    }
  },

标签： jqueryjquery-validate

解决方案

但它仍在验证并向父级添加一类“错误状态”。

这是“验证”，因为您有一个带有规则的字段，每次触发时都需要对其进行评估。但是，这不是“失败”的验证。

在这种情况下，添加类的是您自己的errorPlacement函数error-state......

errorPlacement: function (error, $element) {
    ....

    if (inputType === 'checkbox') {
      $parentField.addClass('error-state');
      .....
    }
},

这不是你应该做的errorPlacement。它的唯一目的是将错误消息放置在您的布局中。它不应该用于添加/删除任何验证类。

而且由于您没有删除此类的代码，因此它将保留在那里。同时，尽管插入了您的自定义类，但验证插件仍将此字段视为“有效”。

如果您想在无效/有效验证时添加/删除类或做其他事情，您将使用highlight和unhighlight回调函数。

从您的其他问题之一的答案中引用我自己的话：

“......你不应该使用它errorPlacement来添加类。你应该只使用它来将消息放入你的布局中。......”

也无需使用required: false，因为这是默认设置。如果您发现自己设置required为false，则意味着您的方法有其他问题。

不确定是否有办法只对这个单一元素进行强制验证？

不知道您真正想要实现什么，但您可以使用该.valid()方法以编程方式触发字段验证。

$('#my_field').valid();

但是，这只会强制插件评估该字段，这不会解决您的问题，因为您的自定义errorPlacement函数添加了一个插件无法删除的验证类。

推荐阅读