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

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

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

After failed client side validation of a form Trinidad shows error messages and highlights labels of failed inputs. I need to highlight the input fields themselves. Is it possible to do it somehow? The most desperate solution I can think of is attaching js event listener on DOMAttrModified event on labels, but it's really an awful hack.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

孤独难免 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
});
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文