jQuery Validation 验证元素，即使设置为 "required: false"

Question

我的表单上有一个不需要的复选框，我在我的规则中将其设置为必需的“false”，但它仍在验证并添加一个 class 的“error-state”到 parent。不确定是否有办法只对这个单个元素强制验证？

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);
    }
  },

Answer 1

but it is still validating and adding a class of "error-state" to the parent.

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

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

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

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

这不是您应该用 errorPlacement 做的事情。它的唯一目的是 将错误消息放置 在您的布局中。它不应该用于 add/remove 任何验证 classes.

并且由于您没有适当的代码来删除此 class，它将保留在那里。同时，尽管插入了您的自定义 class.

，验证插件仍将此字段视为“有效”

如果您想 add/remove classes 或在 invalid/valid 验证后做其他事情，您可以使用 highlight 和 unhighlight 回调函数。

引自an answer on one of your other questions:

"... you should not be using errorPlacement for adding classes. You should only use it for placing the message into your layout. ..."

也没有必要使用 required: false，因为这是默认设置。如果您发现自己将 required 设置为 false，则表示您的方法存在其他问题。

Not sure if there is a way to just force validation on this single element?

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

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

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

jQuery Validation 验证元素，即使设置为 "required: false"

jQuery Validation validating element even though set to "required: false"

jquery

jquery-validate