Invalid Flashing Fields
So what’s the use of learning about new toys like AcroForm Objects and AcroForm Field Name Generators if you don’t take the time to play with them? Today felt like the right day to do just that and I came-up with a sample form where invalid fields flash red until the user has entered valid values into them. Only once all fields are valid can the form be submitted.
Update: Check-out the newer version on the new Invalid Flashing Fields 2.0 post.
Minimum Requirements: Designer 7.1, Acrobat 7.0.5.
Note: A basic understanding of AcroForm Objects is required for this sample.
The sample form works like this: When the user clicks on the Submit button, there’s a script which looks at all fields on the form and validates them for valid content. In this particular form, the only requirement is for the fields to be filled (i.e. have non-null values). If all fields are filled, the form is them submitted however, if there’s at least one field which isn’t filled, the first-found non-filled field is set to flash red until the user has filled it.
Since XFA doesn’t natively support flashing fields, this is all done using the Acrobat app, Document and Field objects, discussed in greater detail in my previous post on AcroForm Objects, as well as my AcroForm Field Name Generator code.
When a non-filled field is found, the Submit button’s script will get the AcroForm Field object name for the invalid field and use it to generate a small script which will run every time an Acrobat Timer object expires. This timer is created in the following block of code:
moFlashTimerID = app.setInterval(
"var f = this.getField('GetAcroFormFieldName(oField)');" +
"if (color.equal(f.fillColor, color.red))" +
"{ f.fillColor = [" + moAcroFieldFillColor.toString() + "]; }"
"else" +
"{ f.fillColor = color.red; }",
500);
In this block of code, the Acrobat app object’s setInterval method is used to create a timer which will continously expire at a specific interval (in this case, every 500 milliseconds, or 0.5 seconds) and every time it expires, it’ll execute the code specified in the first parameter. Since the timer’s code will execute within the context of the document from which the setInterval method was called, the this keyword will represent Acrobat Document object pertaining to the form. The GetAcroFormFieldName method can then be used to get the AcroForm Field object name pertaining to the invalid field (oField) which is then passed to the Acrobat Document object’s getField method. From there, the AcroForm Field’s fill color is compared to red: If it’s already red, it’s set to a light gray color; otherwise, it’s set to red.
It’s important to note that the setInterval method returns an Acrobat Interval object which can subsequently be used to cancel the interval timer in order to get the field to stop flashing red once the user has filled it with a value. This object is also required in order to ensure the timer is stopped when the form is closed if the user ever decides to close the form while an invalid field is flashing (see the code in the root subform’s (form1) DocClose event).
Updated: August 15, 2006
Posted by Stefan Cameron on June 18th, 2006
Filed under AcroForm Objects,Scripting,Tutorials
Both comments and pings are currently closed.
This is great — the blinking fields are exactly what I need. Except that I need to do it in Acrobat, not Designer. Is there are JavaScript that could do the same thing using AcroForms?
Jay Fresno,
Actually, if you look closely, this first try at invalid flashing fields relies quite heavily on AcroForm-style scripting despite the fact that it’s done within the context of an XFA form. The second version I posted later-on is more XFA-style. app.setInternal, this.getField(), color object and more are all from AcroForm scripting but I unfortunately don’t have an AcroForm-only script available.
hi i have tried to use your script in my form and possibly coming with lot of errors. i have five fields namely name,ssn,address,title,division.i copied the scriptoject and placed the code in mine. i modified the code in the submit button to fit the names of objects i have. i added the script in each field of validate as mentined in your form and saved it in designer 7 dynamic pdf.. but it simply shows error and doesnt work.can you let me know what i was missing
thanks
Hi Stefan,
urs is the first site i wld be visiting if i need scripts and its jsut wonderfull with the way you come about with the scripts. i have been trying to get his invalid fields working but it simply wouldnt.cant figure out why.please send me your suggestions and advice.
thanks so much for putting the scripts together for people like me
thanks
sirila,
I’m glad you’re finding my tutorial to be useful for your form however I can’t really tell what’s wrong without knowing what error message(s) you’re getting. Would you be able to post it here? Also note that I haven’t tested this tutorial in versions of Designer and Acrobat earlier than 7.1 and 7.0.5, respectively. If you’re attempting to use this with Designer 7.0 and Acrobat 7.0, it may not work properly.
sirila,
You should also have a look at the updated version of my tutorial as it uses different scripts that may be more compatible with your form.
Hi Stefan,
Thanks for the wonderfull work of putting everything together.your scripts are very usefull. i tried the recent version of invalid fields and it works great on my form.i have designer 8. it spots the fields highlights and flashes. however im encountering one problem. if the required field is in the second page of the form and i try to scroll down after it shows the warning message it doesnt allow me to.if i click on the mouse once and then try again it allows me to scoll through. please let me know how i can get through this glitch
thanks