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-position:top right;

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:

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]


  1. Thanks


    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

  2. 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...

  3. 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.

  4. 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!

      • avatar
      • Jake
      • Thu 31 Oct 2002

      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

      Show the rest of this thread

  5. Marking fields as required


    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.


    Subject *: <FIELD> Name *: <FIELD> E-mail: <FIELD>


    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.


    Peter Franken The Netherlands

    • avatar
    • mary
    • Thu 13 Mar 2003

    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.

Your Comments


Navigate other articles in the category "Forms"

« Previous Article Next Article »
How to make hidden fields temporary   Buttons with Keyboard Shortcut

About This Article

Author: Jake Howlett
Category: Forms
Keywords: fields; required;


required.gif (0 Kbytes)
valid.gif (0 Kbytes)


Print Friendly

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »