Introduction

One of the most common tasks on any web page, mobile or desktop, is the form submission. For example, a registration page, login page or feedback form.

On the desktop these forms tend to be of all different incarnations, some multi page, some single page, some ajax, some not, some fancy, some plain.

On a mobile device the form tends to be simple. A single page with the forms laid out vertically. No fluff, no gimmicks - bandwidth is limited, cpu time precious.

The Form Validation Framework builds on jqm4gwt to make building these kinds of simple forms very easy.

Getting Started

To build a form, we need to create a class that extends JQMForm. This class will contain the widgets that build up the form. It will also register validators (more on that soon), and set the submission handler (more on this too).

The JQMForm must when constructed must add the widgets you want in the form. Lets say we were building a feedback form. We could want name, email address and comment. Our class would look something like the following (ignore the constructor call for now).

```

public class FeedbackForm extends JQMForm {

public FeedbackForm() { super(...);

JQMText name = new JQMText("name", "Name");
add(name);

JQMEmail email = new JQMEmail("email", "Email");
add(email);

JQMTextArea comment = new JQMTextArea("comment", "Comment");
add(comment);

JQMSubmit submit = new JQMSubmit ("Send feedback");
add(submit );

} }

```

Just like any standard panel right ?

Ok, so next we want to add a submission handler. This is the callback (or listener if you prefer) that will be invoked when the form is submitted. It's a very simple one method interface called SubmissionHandler.

How is the form submitted ? Well magic! If you add a JQMSubmit widget to the form, that will automatically be wired up to submit the form. Or you can invoke the submit() method on the form object programatically if required (for example, from an onClick handler in a button).

So lets implement the submission handler. An instance of this must be passed to the super constructor of the form object.

```

public class FeedbackSubmissionHandler implements SubmissionHandler {

@Override public void onSubmit(final FeedbackForm form) { // do stuff with the form // we might want to make a JSON call // and then forward to a new JQM page }

}

```

What's so good about this? Well not a lot really. But the time saver comes in the validation part.

Validation

Usually when we submit a form we want to validate it before sending it off. That's called client side validation. And while it is no substitute for server side validation, it means avoiding server round trips for trivial validation (such as email addresses being in a valid format).

Validation in this framework use the simple one method Validator interface. Implementations of this are added to the form and associated with a widget. At submission time, all validations are invoked and any errors are rendered on the page next to the associated widget.

In addition, if the widget supports the onBlur handler, the validation will be invoked when the focus is lost from the element. This is useful so that as a user is progressing through the form they are being made aware of errors as they go - instead of all at once at the end.

To add a validator, we invoke addValidator(JQMFormWidget, Validator). For example,

```

JQMEmail email = new JQMEmail("email", "Email"); add(email); addValidator(email, new RegexValidator(email, "someregexhere");

```

Now on submission, this validator will be invoked. And if it fails, the submission handler will not be invoked and an error will be rendered on the page next to the email input element.

In addition, there is a shortcut method called addRequired(JQMFormWidget) that will register a not-null and not-empty validator for the given field. This is provided because setting some fields as "required" is a very common use case.