I have implemented custom server side validation for form fields, so when the user specifies a constraint, the field will be validated on form submit. I would like to have client side validation as well, if possible at constraint level so that all that it needs to be configured on a field is the constraint. Example: show an error bellow the field on blur event if the field is invalid. I know i can also provide the script clientvalidation.jsp, but i don't understand how this is working because adding the script seems to have no effect.
我已经为表单字段实现了自定义服务器端验证,因此当用户指定约束时,将在表单提交时验证该字段。我想在客户端进行验证,如果可能的话,在约束级别,以便在字段上配置所有需要的是约束。示例:如果字段无效,则在模糊事件的字段旁边显示错误。我知道我也可以提供脚本clientvalidation.jsp,但我不明白这是如何工作的,因为添加脚本似乎没有任何效果。
2 个解决方案
#1
Since you are dealing with the rendered page, I recommend you add client side validation using a standard validation library, such as the jQuery validation plugin:
由于您正在处理呈现的页面,我建议您使用标准验证库添加客户端验证,例如jQuery验证插件:
jQuery Validation插件
It does what you are looking for, such as this sort of thing:
它可以满足您的需求,例如:
I've used this in CQ pages. Check out the video on that page--it gives a good demo of how to do just what you are looking for. And check out the demos page:
我在CQ页面中使用过这个。查看该页面上的视频 - 它提供了一个很好的演示,说明如何完成您正在寻找的内容。并查看演示页面:
This isn't the only validation option, so you could also consider others. I think the key is to just approach this problem as a typical HTML/JavaScript need rather than a CQ need.
这不是唯一的验证选项,因此您也可以考虑其他选项。我认为关键是要将此问题作为典型的HTML / JavaScript需求而不是CQ需求来解决。
Also see Best JavaScript solution for client-side form validation and interaction?
另请参阅最佳JavaScript解决方案以进行客户端表单验证和交互?
#2
You need to create a clientlib that contains JavaScript code that finds the proper form elements, attaches listeners to proper element events, performs the actual input validation within the listeners and finally displays appropriate messages on the page.
您需要创建一个clientlib,其中包含能够找到正确表单元素的JavaScript代码,将侦听器附加到正确的元素事件,在侦听器中执行实际的输入验证,最后在页面上显示相应的消息。
#1
Since you are dealing with the rendered page, I recommend you add client side validation using a standard validation library, such as the jQuery validation plugin:
由于您正在处理呈现的页面,我建议您使用标准验证库添加客户端验证,例如jQuery验证插件:
jQuery Validation插件
It does what you are looking for, such as this sort of thing:
它可以满足您的需求,例如:
I've used this in CQ pages. Check out the video on that page--it gives a good demo of how to do just what you are looking for. And check out the demos page:
我在CQ页面中使用过这个。查看该页面上的视频 - 它提供了一个很好的演示,说明如何完成您正在寻找的内容。并查看演示页面:
This isn't the only validation option, so you could also consider others. I think the key is to just approach this problem as a typical HTML/JavaScript need rather than a CQ need.
这不是唯一的验证选项,因此您也可以考虑其他选项。我认为关键是要将此问题作为典型的HTML / JavaScript需求而不是CQ需求来解决。
Also see Best JavaScript solution for client-side form validation and interaction?
另请参阅最佳JavaScript解决方案以进行客户端表单验证和交互?
#2
You need to create a clientlib that contains JavaScript code that finds the proper form elements, attaches listeners to proper element events, performs the actual input validation within the listeners and finally displays appropriate messages on the page.
您需要创建一个clientlib,其中包含能够找到正确表单元素的JavaScript代码,将侦听器附加到正确的元素事件,在侦听器中执行实际的输入验证,最后在页面上显示相应的消息。