Personal tools
You are here: Home / OSCAR EMR 12.x / 2.0 Clinical Functions / 2.5 eForms / 2.5.7 Calendar Popups and other Validations

2.5.7 Calendar Popups and other Validations

eForm input fileds can use calendar popups and other tools to ensure reliable input.

Calendar Popup

OSCAR ships with a DHTML calendar that is easy to hook up.

Standard Calendar


The eforms are in or similar and the calendars are in so you have to reference them as below in the <head> of your eform.  You can use for full documentation, but what is below is enough to get you started.

<!-- main calendar program -->

<script type="text/javascript" src="../share/calendar/calendar.js"></script> <!-- language for the calendar -->
<script type="text/javascript" src="../share/calendar/lang/calendar-en.js"></script> <!-- the following script defines the Calendar.setup helper function -->
<script type="text/javascript" src="../share/calendar/calendar-setup.js"></script>

<!-- calendar stylesheet -->

<link rel="stylesheet" type="text/css" media="all" href="../share/calendar/calendar.css" title="win2k-cold-1" />

For most this will do just fine, however if you want a different colour scheme there are several prebuilt ones in OSCAR that you can reference, or you can put your own design into the eform directory.  Merely change the href on the stylesheet.  Options include

  • href="../share/calendar/calendar.css" which is the default above which will give you a blue scheme
  • substitute calendar-blue.css in above which will give you a blue
  • calendar-blue2.css in above which will give you a blue
  • calendar-green.css in above which will give you a green
  • calendar-brown.css in above which will give you a brown
  • href="../share/calendar/skins/tiger/theme.css"
  • href="../share/calendar/skins/aqua/theme.css"

Referencing the Calendar

Now suppose you have the following HTML with a text field that you want filled with a date and a handy calendar icon for the users to click:

 <form ...>
  <input type="text" id="data" name="data" />
  <img src="../images/cal.gif" id="User_date_cal">

You want the calendar icon to popup a calendar widget when clicked? Just insert the following code immediately after the closing HTML <form> tag:


<script type="text/javascript">
      inputField  : "data",         // ID of the input field
      ifFormat    : "%Y/%m/%d",     // the date format
      button      : "User_date_cal" // ID of the calendar trigger


Users.... well, they have been known to submit values that you don't want.  You can help blame them for that but you can help them.

OSCAR Measurements

If you reference measurements for being pushed from the eForm to OSCAR (see eform magic) then OSCAR will validate the measurement for you with its internal validation rules.


If you do not care about content but you want to require that partly filled eForms are not saved, all you need to do is to add a "required" attribute and Firefox and Chrome will validate it on submit so that all unfilled fields are highlighted in red.

HTML5 validation

Furthermore the first one gets the focus and a balloon asking to "Please fill out this field"

An example of the "required" attribute code is as below

<label for="fname">First Name *</label>
<input type="text" name="fname" id="fname" required>

Simple Validations

There are some straight forward validations that are "built in" to OSCAR accessible at

<script src="../../../js/validation.js"></script>

These include the following functions

  • isInt(string) : returns true if integer passed
  • isDigit(c) : returns true if digit passed
  • sEmpty(string) : returns true if empty string or null passed
  • isName(string) : returns true if reasonably formed Name is passed (Given +/- Surname)
  • isUserId(string) : returns true if alphanumeric passed
  • validateRequiredField(fieldId, fieldName, maxLength) : sends alert if empty null or too long value is passed for the required field 
  • validateLength(field, fieldNameDisplayed, maxLength, minLength) : sends alert if the value passed is too long or too short

Javascript Validation by Regular Expression

Much of the input we expect in a defined format.  A general purpose javascript checker of format is as below

<script type="text/javascript">
function checkIt(obj,pattern,note) {
// checks input against passed pattern, if matches returns true
// if not then expresses alert and focuses back on the object	
	var testRegEx= new RegExp(pattern);
	if ((testRegEx.test(obj.value)) !=true && obj.value !="") {
		return false;
	return true;

The matching entry in the eForm provides the pattern for the regular expression and the note to give to the user if the validation fails.  An example would be similar to

<input id="visionOD" type="text" onchange="checkIt(this,'^\\d{1,2}\/\\d{1,3}$','Distance vision is usually expressed 6/6 or 20/20');"

If the entered values are not in the desired pattern (say 6/1000) when the user changes the value of the input the user receives a specific note on proper format.

JQuery Validations

As much new content, even our eForms is running jQuery anyway you would think that you can use the Validation jQuery plugin that comes with OSCAR currently jQuery validation plug-in 1.5.5 to put in error labels for fileds that either do not meet the desired format or are empty.

However as most eForms apply style elements directly to the form element this tend to trump the validations, and the whole thing may just degrade to HTML5 behaviour, 

Best to hand code and move the style position into a containing div.  This allows the error label to be applied against the correct element (and not hide behind the div at the top left of the eform identifying the background)


<!-- typical eform generator output doesn't support jquery.validation -->

<input name="LastSxDate" id="LastSxDate" type="text" required class="noborder style1" style="position:absolute; left:143px; top:926px; width:124px;" value=""> <!-- removal of the position:absolute to an enclosing div allows jquery.validate -->
<div style="position:absolute; left:143px; top:926px">
<input name="LastSxDate" id="LastSxDate" type="text" required class="noborder style1" style="width:124px;" value="">
Reference the validation script in your code with say a reference to a public CDN
<script src=""></script>
<script src=""></script>

or (and if especially you need access off line) access the versions that are built into OSCAR.  (Note that the latest jquery.validate.min.js is tested to work with jquery-1.6.4.min.js to 1.9.0 )

<script src="../../../js/jquery-1.7.1.min.js"></script> 
<script src="../../../js/jquery.validate.min.js"></script>

In the simplest form just invoke it like the examples in the documentation at

as below (if you name your eForm form1)

$(document).ready(function() {
NB jquery-1.9.1.js  will be available for OSCAR 14

Document Actions