Fancy validation using AJAX, alternatives to FeedbackPanel has been edited by Adam A. Koch (Sep 21, 2007).

(View changes)

Content:

If you want to have a more "web 2.0" validation on your forms here is a quick way to do it:

Using the Wicket Example: Ajax Builtin: FormPage as a base, the onError method is called if any of your validators fail, in there you need to view the children components attached to your form and check the isValid() method on each one to determine if that component passed validation.  A really easy to do this is the following:

protected void onError(final AjaxRequestTarget target, Form form) {
             
                log.debug("onError called");

                form.visitFormComponents(new FormComponent.IVisitor() {
                    
                    public void formComponent(FormComponent formComponent) {
                        log.debug("Checking: "  + formComponent.getMarkupId() + 
                                             " " + formComponent.isValid());
                        
                        if (!formComponent.isValid()){ 
                           // If this component failed validation, do something
                           // fancy to display it to the user...
                            target.addComponent(formComponent);
                            target.appendJavascript(
                               "new Effect.Shake($('" + formComponent.getMarkupId() + "'));");
                        }
                        
                    }
                });
            }

The above example also adds in _javascript_ effects borrowed from the Effects example using the script.aculo.us library.

The above code won't compile under 1.3.0-BETA.

Here's some code that will work with version 1.3.0-BETA.

protected void onError(final AjaxRequestTarget target, final Form form) {
    form.visitFormComponents(new IVisitor() {
        public Object formComponent(IFormVisitorParticipant formVisitor) {
            if (formVisitor instanceof FormComponent) {
                FormComponent formComponent = (FormComponent) formVisitor;
                
                if (!formComponent.isValid()){ 
                    // If this component failed validation, do something
                    // fancy to display it to the user...
                     target.addComponent(formComponent);
					 
                     // do a little dance
                     target.appendJavascript(
                        "new Effect.Shake($('" + formComponent.getMarkupId() + "'));");
					
                     // or update the feedback panel
                     target.addComponent(form.getPage().get("feedback"));
                 }
            }
            return formVisitor;
        }
	});
}

Reply via email to