如何使用 Trinidad (JSF) 突出显示带有验证错误的输入字段？

发布于 2024-09-09 02:17:23 字数 150 浏览 11 评论 0原文

表单的客户端验证失败后，Trinidad 会显示错误消息并突出显示失败输入的标签。我需要突出显示输入字段本身。有可能以某种方式做到这一点吗？我能想到的最绝望的解决方案是在标签上的 DOMAttrModified 事件上附加 js 事件侦听器，但这确实是一个可怕的黑客。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤独难免 2024-09-16 02:17:23

我们最终选择了另一个黑客。加载文档后，我们用我们的实现替换了用于提交表单的 trinidad 函数，该实现在验证失败后触发一个事件，然后该钩子循环遍历所有验证消息，查找有错误的输入 id（并设置其样式）。丑陋，但有效。这是使用 jQuery 的这个想法的图示（只是一个草图，未经测试）：

$(window).load(function () {
//save original function for form submit
var originalSubmit = window.submitForm;
//replace function for form submit with custom implementation that triggers some event in case of validation failure
window.submitForm = function (form, doValidate, parameters, isPartial) {
    var retval = originalSubmit(form, doValidate, parameters, isPartial);
    if (!retval) {
        $(window).trigger('failedFormValidations', [form, doValidate, parameters, isPartial]);

    }

}

//bind a listener for failed validations which performs the desired behavior
$(window).bind('failedFormValidations', function(event, form, doValidate, parameters, isPartial) {
    // reset all inputs to nonhighlighted state, then loop through all labels and hightlight inputs with error
});
}

We've finally chosen another hack. After the document is loaded, we replace the trinidad's function for submiting the form with our implementation which triggers an event after failed validation and this hook then loops through all validation messages, looking for id of input with error (and set it's style). Ugly, but works. This is the ilustration of that idea using jQuery (just a sketch, not tested):

$(window).load(function () {
//save original function for form submit
var originalSubmit = window.submitForm;
//replace function for form submit with custom implementation that triggers some event in case of validation failure
window.submitForm = function (form, doValidate, parameters, isPartial) {
    var retval = originalSubmit(form, doValidate, parameters, isPartial);
    if (!retval) {
        $(window).trigger('failedFormValidations', [form, doValidate, parameters, isPartial]);

    }

}

//bind a listener for failed validations which performs the desired behavior
$(window).bind('failedFormValidations', function(event, form, doValidate, parameters, isPartial) {
    // reset all inputs to nonhighlighted state, then loop through all labels and hightlight inputs with error
});
}

回复收藏 0 原文

~没有更多了~