联系表 7：点击提交后向 <input> 添加一个类

Posted 2023-05-09

【中文标题】联系表 7：点击提交后向 <input> 添加一个类

【英文标题】：Contact Form 7 : Add a class to <input> after clicking on Submit

【发布时间】：2020-04-15 17:30:17

【问题描述】：

我在 WordPress 上使用 Contact Form 7，我必须删除所有由 CF7 自动添加的 span 元素，因为它不适用于 bsCustomFileInput。

我正在寻找一种方法来将类添加到具有类 verif-valid 的 input 元素，具体取决于输入的有效性。

我的想法：

$('.wpcf7-submit').on('click', function (e) 

For all input with class verif-valid :
  If is valid :
    Add class .is-valid
  Else :
    Add class .is-invalid

);

但我不知道怎么写，有什么想法吗？

【问题讨论】：

在这个逻辑运行时，是否已经确定了有效性？如果是这样，逻辑是hasClass()和addClass()的简单用法

有效性由点击“提交”后的联系表7确定。如果没有我的删除 CF7 添加的自动跨度的代码，我们会在每个未验证的字段下方显示一条消息。但我不太了解 CF7 是如何工作的，所以我不知道是否可以将这些值检索到我的代码中......

我要问的是，在单击处理程序执行时，输入是否已经具有 verif-valid 类？

哦，绝对是的，因为我不想将“is-valid”或“is-invalid”添加到还没有“verif-valid”类的字段中

好的，如果是这种情况，您可以通过 $('.verif-valid').addClass('whatever') 为所有具有该类的元素添加一个类。

【参考方案1】：

if($('input').hasClass('verif-valid'))
   $('input').addClass('some-new-class');

删除类

else
  $('input').removeClass('some-old-class');

【讨论】：

谢谢，但是只有当插件 Contact Form 7 使输入无效时，该函数才应添加类（例如，如果该字段为必填但为空）