When we create survey questions for survey forms in ClickDimensions, we can associate the following data types to these questions.

What about if we have questions that require date or numeric data inputs?

In the real world, surveys will have requirements for numeric and data inputs (ABN numbers and DOB) and these should have some sort of input validation to provide the best data capture.

Unfortunately, ClickDimensions does not provide this, so the workaround was to inject some JQuery scripting on the survey form.

Create Survey Question and Form

Create your survey questions as type ‘Text Box’ under Survey Questions > New.

create-survey-question-and-form

 

Create your web form as type ‘Survey’ under Web Content > New.

new-web-content

 

Open up the survey form and click on ‘Design’ button on the command bar to bring up the form editor.

Add your question onto the form and then click on the ‘Code Editor’ button to bring up the code editor. This is where you inject your JQuery script. Refer to the ClickDimensions documentation on Form Code Editor for more info.

 

Finding the ID of the field

For each question/field that you create, you need to reference its ID. Unlike in Dynamics CRM, you cannot identify this within the form editor.

The best way is to use the DOM explorer in the IE (Edge) F12 Developer Tools. This article assumes that you are familiar with the F12 debug tool.

f12-debug-tool

 

Once you have the ID of the field, you can then inject JQuery field validation on the form!

The best practice is to put all your code inside document.ready function as this ensures that your code gets processed after your form has loaded completely.

 

Numeric Validation

Basically, you need to add a function ‘onkeypress’ of the field that you want to validate. Follow the code below:

 

After you put this code in the JavaScript text field, save it and then preview the form.

Try and enter any non-numeric character in the field and you will find out that you are not able to.

Date Validation

We can use the standard Datepicker widget in JQuery which needs to be added to the field you want to validate with the specified date format.

Refer to this documentation on Datepicker Widget to see all the supported date formats and usage.

Use the following code:

 

After you put this code in the JavaScript text field save it and then preview the form.

Now when you enter data on the field, it should come up with the date picker.

date and number validation for survey questions

Things to Note

Technically all JQuery codes in ClickDimensions is unsupported. However, I think adding validation rules on fields is quite safe as it does not involve too much manipulation of DOM elements.

There are also quite a few JQuery plugins that do a lot of fancy field validation but it involves referencing third party scripts in your JQuery. The above examples are an easier way of providing field validation.