Project Claire: JavaScript ~ Form Field Validation
From PikaDocs
Last modified: July 2, 2005
In the Claire design, some form field validation scripts are embedded, others are called from an external file.
For example, at the Prospective Client page, the content of which is generated using the intake_contact_list.html template, the form field validation for the SSN (Social Security Number), DOB (Date of Birth) and Phone fields is accomplished using both external and embedded javascript.
The external javascript is located in the /js subdirectory in the validation.js file, and is called from within the template with the following code:
<script type="text/javascript" src="/pika/js/validation.js"></script>
The embedded javascript in that same template is located at the bottom of the template, as follows:
<!-- additional validation scripts -->
<script type="text/javascript">
<!--
var old_ssn_length = 0;
function pika_ssn(what)
{
if (what.value.length == 3 && old_ssn_length == 2)
{
what.value += '-';
}
if (what.value.length == 6 && old_ssn_length == 5)
{
what.value += '-';
}
old_ssn_length = what.value.length;
}
var ac_autotab_on = 1;
var old_dob_length = 0;
function pika_dob(what)
{
if (what.value.length == 2 && old_dob_length == 1)
{
what.value += '/';
}
if (what.value.length == 5 && old_dob_length == 4)
{
what.value += '/';
}
old_dob_length = what.value.length;
}
var ac_autotab_on = 1;
function pika_area_code(what, max, field_name)
{
if (max > 0 && what.value.length >= max && ac_autotab_on == 1)
{
eval('document.form1.' + field_name + '.focus()');
}
if (what.value.length >= 3)
{
ac_autotab_on = 0;
}
else if (what.value.length == 0)
{
ac_autotab_on = 1;
}
return;
}
var old_phone_length = 0;
function pika_phone(what)
{
if (what.value.length == 3 && old_phone_length == 2)
{
what.value += '-';
}
old_phone_length = what.value.length;
}
document.form1.first_name.focus();
// -->
</script>
Related articles and files:
- Project Claire: JavaScript ~ External Validation File
- Project Claire: intake contact list.html ~ see javascript at bottom of template
