Datapolis Process System

Search:

Contents
:
IndexBookmarkPrint
Home > Tutorials > Javascript validation of form fields

Javascript validation of form fields

 

 

This walkthrough will show you how to use client side validation using javascript in action launch form. In this example you will create basic e-mail validation, which checks if address satisfies common patterns.

The end result looks like this:

 

 

Creating workflow


Create simple workflow with one action launch form and one string variable. Name this variable e-mail.

 

 

Editing form fields


Go to the action launch form and add variable to the quick form.

 

 

Now add the logic behind control. Click edit on e-mail variable. Change Field type to Single line of text, then to the Javascript section and type name for Client validation function.

In this example we named it email_validate.

 

 

Additionally you can edit form field name and description so that the form has more refined look.

Javascript code


Go back to the form window and click Custom JavaScript button. In the following window you can click Generate Code, so you don't have to write function headers by yourself.

 

 

As you can see, there are now two functions: _dp_onAfterFormLoaded() and email_validate(field, args). First one triggers with form initialization, and the second whenever control loses focus. You can also trigger it by calling field.validate().

For more information check out our Javascript Object Model reference.

Paste the following code in function body:

 

function email_validate(field, args) {
    var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    args.isValid = re.test(args.value);
    args.msg = 'The e-mail is invalid.';
}

 

Args.msg is a massage displayed when args.isValid is set to false.

Deploy and run


Remember to deploy your workflow before leaving designer. Now you can check how everything works by starting workflow and running the action.

 

 

Download


You can also Download workflow definition and load it to your designer.