Marking fields as required
When a form is shown to the user on the web it is a good idea to let them know which fields are compulsory. The de facto way of doing this is to put an asterix (*) after the field label or to use red text for the label. Well, here is a method that not only looks a little better but is dynamic as well.
In the field below, the red circle is used to denote that the field is required.
This is achieved using a background image in the input box. Typically, this is only something that you can do in Internet Explorer. If, like me, you do most of your work on Intranets where the browser version is fixed, this is not a problem.
To do this to a field (called "TestField" in this example) add the following to its HTML Attribute:
@If(TestField=""; "class=\"RequiredField\""; "")
Your form then needs the following Style defined on it somewhere, before the fields, usually in the header:
.RequiredField {
background-image:url(/dbname.nsf/required.gif?OpenImageResource);
background-position:top right;
background-repeat:no-repeat;
}
How can we make this a little more dynamic? How about changing or removing the image once the field has been filled in (validated) ? Look at the form below that has four fields, three of which are required:
Your Detials
Note: A red circle 
denotes required fields and a green circle 
is for fields that are OK.
| First Name: | |
| Last Name: | |
| Age: | |
| Sex: |
Tab through the fields, filling in some values, and see what happens. When you fill in a value in the first field the circle changes colour. In the second field the circle disappears. In the third it remains the same. What you do is up to you really...
How does this work? Well, the onChange event of the first two fields checks to see whether a value has been entered and then changes the Style of the box using its className property. Here is the HTML generated for the first field:
<input type="text" class="RequiredField" name="textfield1" onChange="this.className = (this.value!='') ? 'ValidField' : 'RequiredField'">
You generate this by making the HTML attributes of the field:
@If(TestField=""; "class=\"RequiredField\" "; "") + "onChange=\"this.className (this.value!=\'\') = \'ValidField\' : \'RequiredField\'\"
Note: The Style (class) called "ValidField" is identical to that of "RequiredField" apart from the URL pointing to a graphic called "valid.gif" that is green, not red.
Thanks to Kerry Kilpatrick for pointing out that fields already completed in a document, that is saved and then edited, show as required. Fixed - [23/01/01]
Thanks
Hello,
I got your website URL throught Notes.net. Really, It is excellent website. You solved my Javascript problems. I solved my problem throug validation20.nsf database which is fields validation.
Thanks once again
Regs Srinivas
Reply
Code correction..
Jake, I found that I needed to replace this code from the article:
@If(TestField=""; "class=\"RequiredField\" "; "") + "onChange=\"this.className (this.value!=\'\') = \'ValidField\' : \'RequiredField\'\"
With this code for it to work:
@If(TestField=""; "class=\"RequiredField\" "; "") + "onChange=\"this.className = (this.value!=\'\') ? \'ValidField\' : \'RequiredField\'\";"
Thanks for this, this is much cleaner than having little red balls or asterisks etc.. I especially like having them in the field!
Nice work once again...
Reply
textarea fields
Also, in order to make it work in a textarea field. I needed to move the "onChange" code from the HTML Attributes to the onChange event. The code is: this.className = (this.value!='') ? '' : 'RequiredField'
And then I set the class in the properties for the field to "RequiredField".
Without doing this, the text area shrunk down to a fairly small field for some reason.
Reply
Can't get it working
Not having much luck with this. I created a separate page for the CSS and imported in the HTML Head Content of the form. I'm not getting any errors though...nothing is happening. I'm assuming that this line of code: "area/DDC6F9C72936FE2A862569B50046FF35/$file/required.gif" needs to be adjusted to my database name and directory? Any additional caveats that I should be aware of when trying to implement this would be great. Thanks!
Reply
Re: Can't get it working
Hmm, not sure why I left that UniqueID in there. Very misleading! Look at the new code and see if that doesn't make a little more sense...
Jake -admin
Reply
Show the rest of this thread
Marking fields as required
Hi,
I would like to do a similar but instead of using red dots in the specific fields, I would like to color the field description text red. It should do so after validation.
Example:
Subject *: <FIELD> Name *: <FIELD> E-mail: <FIELD>
*=required
so in this case the text Subject and/or Name should be colored red if they aren't filled out when submitted.
Hope you can point me in the right direction.
Thanks,
Peter Franken The Netherlands
Reply
Required Dialog List
I can not get this to work on a dialog (drop down) list.
It works perfectly in text field but not other types: dialog, combo, radio buttons, etc.
Any help would be appreciated.
Reply