formvalidation.io配合Tailwind时如何让错误消息显示在对应输入框下方

问题原因 #

你配置失效的核心问题是对FormValidation.utils.closest方法的使用逻辑错误：
closest是从当前元素向上遍历父级节点匹配选择器，而你定义的.messages容器是输入框的同级兄弟元素，不在父级链路中，所以方法永远返回空值，自然不会渲染错误信息。

之前直接填.messages作为容器时所有错误都展示在第一个输入框下，是因为全局选择器默认取第一个匹配的DOM元素，没有和当前触发校验的输入框做绑定。

解决方案 #

步骤1：确认HTML结构

保证每个输入框和它专属的错误容器放在同一个外层父节点内：

<div class="relative w-full mb-3">
    <label class="block uppercase text-thatblue text-xs font-bold mb-2" for="password">Password</label>
    <input type="password" name="password" id="password" class="border-0 px-3 py-3 placeholder-thatblue-lightest text-thatblue bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" placeholder="Password">
    <!-- 每个输入框专属的错误容器，放在同一外层div下 -->
    <div class="messages mt-1"></div>
</div>

如果担心relative类被其他地方复用导致匹配错误，可以给外层父节点加个专属类，比如form-field-wrap，后续匹配更稳妥。

步骤2：修改校验插件配置

调整container的匹配逻辑，先找到当前输入框的外层父节点，再在父节点范围内找专属错误容器：

message: new FormValidation.plugins.Message({
    clazz: 'text-xs text-red-500',
    container: function (field, ele) {
        // 匹配当前输入框的外层父容器
        const fieldWrap = FormValidation.utils.closest(ele, '.relative');
        // 也可以用你自定义的专属类匹配，比如 FormValidation.utils.closest(ele, '.form-field-wrap')
        // 在父容器内查找当前输入框对应的错误容器
        return fieldWrap.querySelector('.messages');
    },
}),

内容的提问来源于stack exchange，提问作者Giles Bennett