Question

在Tapestry 5中，在表单中，我需要在每个单独的表单字段完成后记录（通过谷歌分析）并成功通过客户端验证。

我需要实时为每个单独的字段执行此操作，即使表单未提交，因此等待表单提交并在服务器上执行此操作不是一种选择。

有没有办法（开箱即用）挂钩Tapestry 5提供的javascript客户端验证的成功/失败？

我能想到的两种可能性是：

Tapestry api为成功/失败事件提供回调函数。
在成功/失败时收听一些Tapestry自定义事件。

但我在文档中找不到关于这些现有内容的任何内容。这些选项中的任何一个都是可能的，还是有另一种方法来实现这一目标？

Answer 1

您可以附加客户端事件侦听器以实现您想要的效果。看看tapestry.js中的Tapestry.FormEventManager.handleSubmit。表单提交会触发以下客户端事件：

/**
 * Event that allows observers to perform cross-form validation after
 * individual fields have performed their validation. The form element is
 * passed as the event memo. Observers may set the validationError property
 * of the Form's Tapestry object to true (which will prevent form
 * submission).
 */
FORM_VALIDATE_EVENT: "tapestry:formvalidate",

/**
 * Event fired just before the form submits, to allow observers to make
 * final preparations for the submission, such as updating hidden form
 * fields. The form element is passed as the event memo.
 */
FORM_PREPARE_FOR_SUBMIT_EVENT: "tapestry:formprepareforsubmit",

/**
 * Form event fired after prepare.
 */
FORM_PROCESS_SUBMIT_EVENT: "tapestry:formprocesssubmit",

/**
 * Event, fired on a field element, to cause observers to validate the
 * input. Passes a memo object with two keys: "value" (the raw input value)
 * and "translated" (the parsed value, usually meaning a number parsed from
 * a string). Observers may invoke Element.showValidationMessage() to
 * identify that the field is in error (and decorate the field and show a
 * popup error message).
 */
FIELD_VALIDATE_EVENT: "tapestry:fieldvalidate",

/**
 * Event notification, on a form object, that is used to trigger validation
 * on all fields within the form (observed by each field's
 * Tapestry.FieldEventManager).
 */
FORM_VALIDATE_FIELDS_EVENT: "tapestry:validatefields",

Answer 2

一位同事建议使用ProptypeJS Class.create覆盖Tapestry.FieldEventManager.validateInput函数。

Tapestry.FieldEventManager = Class.create(Tapestry.FieldEventManager, {
                                 validateInput : function($super) {
                                     var isValidationFailure = $super();

                                     // can use this.field inside this function to access the field being validated

                                     if(!isValidationFailure) {
                                         // LOGIC ON VALIDATION SUCCESS
                                     } else {
                                         // LOGIC ON VALIDATION FAILURE
                                     }
                                     return isValidationFailure;
                                 }
                             });

这很好地解决了这个问题，允许清晰可读的代码，并且可以轻松访问超级实现和实际字段本身，我需要执行跟踪逻辑。最好的部分是它正常工作，当失去焦点时，在每个单独的表单字段上调用validateInput。没有驱动验证引擎的事件的详细知识或杂乱的代码！

FYI validateInput也将在表单提交时为每个表单字段运行 - 可以通过覆盖Tapestry.FormEventManager.handleSubmit来解决以挂接到表单提交逻辑......但这有点超出了本答案的范围。 / p>

Tapestry 5 - 在客户端字段验证成功/失败时运行javascript函数

2 个答案: