JavaScript validation/override red borders?

[charis_dancer]

We are creating numerous forms in LiveCycle and are very averse to having to specify "User Entered - Required" for two main reasons:

• doing so places those ugly, red boarders around required fields
• most fields on most forms are required, we don't want to clutter our forms with red borders

The problem we encounter is that users can submit empty forms/null values via email, and I yet to find a way around this. Incomplete forms/data, particularly on things like requisitions and the like, can lead to delays in processing. We want to mitigate that by forcing client-side validation before users submit their forms via email.

I am very new to both LiveCycle and JavaScript.

I have tried

fieldname.mandatory = "This cannot be left blank.";

tied to the validate event, but this does not seem to do anything: users can still submit forms, even if the value is null/empty.

Where this would most be used is with text and numeric fields and, occasionally, with radio buttons/exclusion groups.

Can someone please help me figure out simple client-side JavaScript validation (or other method) that would force users to enter values in these mandatory fields before submitting, preferably without having to subject our users to the hideous borders?

[Vipin_Bhargava]

Select the textfield and change the value to "User Entered - Recommended" from the object palettes.

[charis_dancer]

Thank you; a blog post I found contained the answer I was looking for. Essentially:

Now you see me, now you don’t.

Interactive forms highlight where you should enter data. To turn this highlighting on, click the Highlight Existing Fields button.

The fillable fields within the form (see example below) are highlighted in a light blue color. This lets you enter information into these fields. By default, Adobe^® Reader^® displays a red border around required fields. Pretty dang ugly, huh?

Fortunately, it can be turned off.  This script (placed on a form:ready event) will do the trick:

    if (xfa.host.name == "Acrobat")

app.runtimeHighlight = false;

Here’s how we achieve this:

Part 1:

In the Object palette, click the Value tab. Under Type, choose User Entered – Required.

• First, we need to define which fields are mandantory/required. Click within the desired field to select it.
• You can assign as many mandatory fields as the form requires. When you are finished doing this, enter the Script Editor.

          Note:   To show or hide the Script Editor window as you need it, click the toggle.

• Select the form:ready event. Be sure JavaScript is the chosen scripting language to run on the Client.
• Type the following script into the window:

    if (xfa.host.name == "Acrobat")       app.runtimeHighlight = false;

• Save your work.

Part 2:

• From the File menu, choose Form Properties.
• Click the Form Validation tab.

               Click Color Failed Fields.               Check the box next to Color fields and fail their validations.

• To turn borders off, click the arrow next to Border Color, then click the box.
• To define a background color, click the arrow next to Background Color, the choose More Colors.
• Select the first available empty box, then click Define Custom Colors.
• Define a custom color per your visual identity guidelines.
• When you are finished, click on Add to Custom Colors, then click OK.
• Click OK on the Form Properties window.
• Save your work.

The result? When the user tries to submit a form without first entering data into the required fields, an alert message is displayed.

When the user clicks OK to clear the error message, form submission is cancelled.

Failed fields are highlighted in an attractive way—without red borders.