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

【问题标题】：jQuery Validation validating element even though set to "required: false"jQuery Validation 验证元素，即使设置为“required: false”
【发布时间】：2020-10-30 17:00:38
【问题描述】：

我的表单上有一个不需要的复选框，我在我的规则中将其设置为必需的“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);
    }
  },

【问题讨论】：

$parentField.addClass('error-state') - 请仔细查看this answer 上一个问题，我在几个月前指出了同样的错误。
换句话说，您的自定义errorPlacement 函数添加了一个不会自动删除的类。您已经有效地绕过了正常的验证流程。

标签： jquery jquery-validate

【解决方案1】：

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

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

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

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

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

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

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

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

从an answer on one of your other questions引用我自己的话：

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

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

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

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

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

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

【讨论】：