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.

Setup

The eforms are in https://127.0.0.1:8443/Oscar12_1/eform/ or similar and the calendars are in https://127.0.0.1:8443/Oscar12_1/share/calendar so you have to reference them as below in the <head> of your eform. You can use https://127.0.0.1:8443/Oscar12_1/share/calendar/doc/reference.pdf 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">
</form>

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">
  Calendar.setup(
    {
      inputField  : "data",         // ID of the input field
      ifFormat    : "%Y/%m/%d",     // the date format
      button      : "User_date_cal" // ID of the calendar trigger
    }
  );
</script>

Validations

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.

HTML5

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 !="") {
		alert(note);
		obj.focus();
		return false;
	}
	return true;
}
</script>

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="">
</div>

Reference the validation script in your code with say a reference to a public CDN

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></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 jqueryvalidation.org

as below (if you name your eForm form1)

<script>
$(document).ready(function() {
	$("#form1").validate();
});
</script>

NB jquery-1.9.1.js will be available for OSCAR 14

Document Actions

Send this

Personal tools