In this guide we will demonstrate the use of Custom Attributes on the Formyoula Form.

If you have any questions, please email us support@formyoula.com.

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

To start using custom attributes, click on any element and open its properties.

You will see a hyperlink "Custom Attributes." click on it.

A modal popup will appear as shown below:

Let's share some example of using custom attributes on the form.

Example 1 - Set Minimum and maximum value in Number Element.

Please find below detailed steps to perform the same:

1. Click on the pencil icon corresponding to the number field.
2. Click on "Add Custom Attributes.
3. Add the following values inside the popup:

Input || data-parsley-min || 5 //For minimum value

Input || data-parsley-excluded || false //This is to be added always

Input || data-parsley-max || 5 //For maximum value

Input || data-parsley-maxlength || 5 //For maximum number of digits

Input || data-parsley-minlength || 5 //For minimum number of digits

4. Save the form and try.

Example 2 - Phone Number Validation:

input | data-parsley-excluded | false

input | data-parsley-type | digits

input | data-parsley-length | [10, 10]

Example 3 - Zip Code Validation:

input | data-parsley-type | digits

input | data-parsley-length | [5, 5]

input | data-parsley-zip | us

input | data-parsley-excluded | false

Example 4 - Set a field as read-only or disabled:

Input || disabled || true

Example 5 - Pattern matching

In this example,  we will allow user to enter hyphens, apostrophes and periods in the text field, but will display an error message if any other symbols will be entered.

data-parsley-pattern   = /^[\s\w.'-]*$/
data-parsley-error-message = "Error Message"

Example 6 - Validate a phone number so that is should start with '+' and have 18 digits in it.

input || data-parsley-excluded || false
input || pattern || [\+]\d{10,18} 

Example 7 - Validate a number to always be five-digit and within range 01000 to 99999.

input||pattern||/^\d{5}$|^\d{5}-\d{4}$/
input||data-parsley-range||[01000, 99999]

For more examples on using custom attributes, please refer http://parsleyjs.org/doc/index.html

For any questions, please contact us - support@formyoula.com.