I posted a blog recently about how to easily create interactive PDF forms using GrapeCity Documents for Excel templates. This post is a follow-up about some awesome enhancements in GrapeCity Documents for Excel v4 and GrapeCity Documents for PDF v4 supporting Validation Types and new input controls for PDF forms.

This post covers:

Create Your Own Excel Template for a Lease Agreement

Download the latest version of GrapeCity Documents for PDF

Download Now!

New GrapeCity Documents for Excel Template Tags and Properties for Validation

New Validation Types are available for Excel Templates in the latest release of GrapeCity Documents for Excel v4. These new Validation Types are based on HTML5 form validation and are used with the type tag in the PDF Form Fields listed below:

Type Description
text Free form text (this replaces the textbox type)
date Date value
time Time value
tel Telephone number value
email Email address value
url Uniform Resource Locator (URL) value
password Password value
month Month value
week Week value
number Number value
search Search value

For the full details about these new Validation Types, please see the help context here. The type specified determines which type of control edits the field value in the GcPdfViewer for GrapeCity Documents for PDF, which has new built-in support for all these Validation Types.

AutoComplete for PDF Form Fields

The PDF Forms Field can also specify autocomplete based on HTML5 autocomplete, which allows web developers to specify what, if any, permission the user agent has to provide automated assistance in filling out field values. Autocomplete also serves information as guidance to the browser regarding the type of information expected in the field. Note the behavior depends on the browser implementation. This greatly enhances the user experience by automating common fields that the user has already typed in other forms. The following table lists the available autocomplete types for the browser to show the appropriate autocomplete values for the PDF Form Field:


Autocomplete
Description
off Do not provide autocomplete for this PDF Form Field
on Provide autocomplete but no type specified (browser inferred based on field name)
name Full name of the current user
honorific-prefix Name prefix or title such as "Mr.", "Mrs.", "Ms.", etc.
given-name Given (or first) name
additional-name Middle name
family-name Last name
honorific-suffix Suffix such as "Jr.", "B. Sc.", "PhD.", etc.
nickname Nickname or handle
email Email address
username User name or account name
new-password Newly-generated password for creating new accounts
current-password The user's current password
one-time-code A one-time code used for verifying user identity
organization-title A job title such as "Senior Product Manager" or "Executive Vice-President"
organization Company or organization name such as "GrapeCity" or "Electronic Freedom Foundation"
street-address The street address for a location, which may include multiple lines, but not including city, state, and ZIP
address-line1 The first line of the street address (should only be used if street-address is not used)
address-line2 A second line of the street address (should only be used if street-address is not used)
address-line3 A third line of the street address (should only be used if street-address is not used)
address-level1 First administrative level in the address, typically the state or province
address-level2 Second administrative level in the address, typically the city, town, or village
address-level3 Third administrative level in the address, for addresses which have at least three administrative levels
address-level4 Fourth administrative level in the address, for addresses which have four levels
country Country or territory code
country-name Country or territory name
postal-code The postal code (ZIP code in the US)
cc-name Full name as printed on or associated with a payment instrument card (credit card)
cc-given-name Given (or first) name as printed on or associated with a payment instrument card (credit card)
cc-additional-name Middle name as printed on or associated with a payment instrument card (credit card)
cc-family-name Last name as printed on or associated with a payment instrument card (credit card)
cc-number Credit card number or other number identifying a payment method such as account number
cc-exp Credit card expiration date, usually "MM/YY" or "MM/YYYY"
cc-exp-month Credit card expiration month
cc-exp-year Credit card expiration year
cc-csc Credit card security code, usually a 3-digit verification number on the back of the card
cc-type Credit card types such as "Visa" or "Mastercard"
transaction-currency Currency in which a transaction is to take place
transaction-amount Amount of the transaction-currency for the transaction payment
language A preferred language, given as a valid BCP 47 language tag
bday Birthdate as full date
bday-day Day of the month of birth date
bday-month The month of birth date
bday-year Year of birth date
sex Gender identity such as "Male", "Female", "Fa'afafine", etc.
tel Full telephone number including country code
tel-country-code Country code for the telephone number
tel-national Full telephone number excluding country code but including country-internal prefix
tel-area-code Area code including country-internal prefix
tel-local Local telephone number without the country or area code.
tel-local-prefix Exchange number or the first part of local telephone number, e.g., for "555-1212"this would be "555"
tel-local-suffix The number within the exchange or second part of local telephone number, e.g., for "555-1212" this would be "1212"
tel-extension Extension associated with tel
impp URL for instant messaging protocol endpoint, e.g., "xmpp:username@example.net"
url URL, such as a home page or company website address
photo URL of an image representing the person, company, or contact information

Some properties should not be included when certain others are used, as noted above. In general, it is better to use the properties for the full formatted value such as name and tel instead of dividing the value up into separate form fields, unless the form requires such a breakdown of the value into separate fields.

Other Common Validation Type Properties

The following additional new properties are available for all validation types:


Property
Description
autofocus Sets the focus to this PDF Form Field when the form shows
disabled Disables this PDF Form Field (the user cannot enter a value)
validationmessage Localized validation message to display to the user when the PDF Form Field get the focus
validateoninput Whether to apply validation immediately during user input

Properties for the "tel", "password", and "url" PDF Form Fields

The following properties are available for the tel, password, and url Validation Types:


Property
Description
pattern Regular expression specifying the pattern of the value, e.g. "[0-9]{3}-[0-9]{2}-[0-9]{3}"
placeholder Text to display in the field initially until the user types a value, e.g., "4 to 8 characters"
maxlength Maximum number of characters allowed for the value
minlength Minimum number of characters allowed for the value

Properties for the "email" PDF Form Fields

The following properties are available for the email Validation Type:


Property
Description
multiple Whether to allow more than one email address
pattern Regular expression specifying the pattern of the value, e.g. "\S+@\S+\.\S+"
placeholder Text to display in the field initially until the user types a value, e.g., "Email address"

Properties for the "text" PDF Form Field**

The following properties are available for the text Validation Type:


Property
Description
maxlength Maximum number of characters allowed for the value
minlength Minimum number of characters allowed for the value
pattern Regular expression specifying the pattern of the value, e.g. "[0-9]{3}-[0-9]{2}-[0-9]{3}"
placeholder Text to display in the field initially until the user types a value, e.g., "4 to 8 characters"
spellcheck Whether the value is checked for spelling errors

Properties for the "search" PDF Field Field

The following properties are available for the search PDF Field Field:


Property
Description
maxlength Maximum number of characters allowed for the value
minlength Minimum number of characters allowed for the value
placeholder Text to display in the field initially until the user types a value, e.g., "Enter search terms"
spellcheck Whether the value is checked for spelling errors

The search Validation Type is intended for PDF Form Fields where the user types search terms for a query. When using autocomplete, this field will show appropriate values for completing a web query.

Lease Rental Application Form Demo

Figure 1 Lease Rental Application Form Spreadsheet Template in SpreadJS to PDF Form in GcPdfViewer

The Lease Rental Application Form Demo easily creates a rich PDF Form with autocomplete from the XLSX spreadsheet template and uses the GcPdfViewer to view and edit the result. The spreadsheet template defines 24 form fields in a 3-page form for the condominium or apartment rental application submitted by the user. First, you can see the spreadsheet template presented in read-only mode using SpreadJS as shown in the animation above, and click the Template button to download the XLSX template for viewing locally in Excel or using Office 365. Next, you can see the form fields in the worksheet cells containing the template markup using mustache syntax, such as A58, I61, and O61, the first three form fields. There are various field validation types and autocomplete types used in this form, including name, email, telephone numbers, addresses, dates, numbers, and more. Finally, click the View PDF button to see the generated form in the GcPdfViewer, and try entering values in the form fields to see the autocomplete working and the validation messages showing invalid or empty values.

Using GrapeCity Documents for PDF Viewer for Editing

How to Create and View PDF Forms from Excel Templates with Advanced Inputs and Validations

Figure 2 Lease Rental Application Form validation message and autocomplete

Scroll down in the viewer to see the form field for LinkToListing, which has the caption PLEASE, COPY & PASTE LINK TO CONDO HERE FROM THE LISTING WEBSITE, i.e. (CRAIGSLIST, ZILLOW, OR HOTPADS. COM) then click that form field to set the input focus. Note that pressing the TAB key to go to the next field will show a notification Required field is empty since this field is marked as required. Most fields in this form will show appropriate AutoComplete prompts from the web browser to help with completing the form. Once the form has been completed and there are no more required empty fields, you can download a local copy of the filled and completed PDF using the Download document tool in the toolbar at the top of the GrapeCity Javascript PDF Viewer. You can also print the document using the Print Document tool next to the Download tool.

Trial Version and Licensing

Download the free trial of GrapeCity Documents for Excel .NET or GrapeCity Documents for Excel Java, and download the free trial of GrapeCity Documents for PDF to try these new features yourself. In addition, you can request a free 30-day evaluation license key by contacting GrapeCity Sales or using the Customer Support Portal to open a ticket. These products are sold separately and the example shown above uses both GrapeCity Documents for Excel (for generating the PDF Form from the Excel template worksheet) and GrapeCity Documents for PDF (for editing and submitting the form using the Cross-Platform Javascript PDF Viewer).

Try a GcPdf free trial for 30 days

Download the latest version of GrapeCity Documents for PDF

Download Now!