JBAS-1379 Card app usability improvements

* Set state field to 'readonly' instead of 'disabled' in patron card form
so that the value will be passed to the server.

* Require phone to have the format /^\d{3}-\d{3}-\d{4}/ if any value is
present.

* Show warning style for missing values on street, city, post code.

* Validate fields onkeyup so it's obvious when a field is newly valid.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/KCLS/openils/var/templates_kcls/opac/register.tt2 b/KCLS/openils/var/templates_kcls/opac/register.tt2
index cf56cb7..532d38d 100644 (file)
--- a/KCLS/openils/var/templates_kcls/opac/register.tt2
+++ b/KCLS/openils/var/templates_kcls/opac/register.tt2
@@ -31,6 +31,7 @@ MACRO input_field(fclass, fname, label, type, css_class, value) BLOCK;
     id='[% field_path %]'
     name='[% field_path %]'
     onchange="validate('[% field_path %]')"
+    [% IF type == 'text' %]onkeyup="validate('[% field_path %]', true)"[% END %]
     value='[% value || CGI.param(field_path) | html %]'/>
 
   [% IF invalid_require %]
@@ -63,7 +64,9 @@ END; # input_field()
    If it gets too big, move to a dedicated file. */
 .patron-reg-invalid {
     font-weight: bold;
-    background-color: red;
+    /* background-color: red; */
+    background-color: #C11B17;
+    color: white;
 }
 .patron-reg-required {
     font-weight: bold;
@@ -428,7 +431,7 @@ END; # input_field()
           <div class="grid">
             <div class="grid-cell" style="width:40%">
               <div>
-                <input disabled='disabled' name='stgba.state' id='stgba.state' value='WA'/>
+                <input readonly name='stgba.state' id='stgba.state' value='WA'/>
               </div>
               <div>
                 <label for="stgba.state">State</label>

diff --git a/Open-ILS/web/js/ui/default/opac/register.js b/Open-ILS/web/js/ui/default/opac/register.js
index 4f7525a..cb1a864 100644 (file)
--- a/Open-ILS/web/js/ui/default/opac/register.js
+++ b/Open-ILS/web/js/ui/default/opac/register.js
@@ -20,6 +20,8 @@ var last_activity = new Date();
 var activity_timeout = 300000;  // 300 seconds
 var post_success_timeout = 30000; // 15 seconds
 var timeout_redirect = 'https://www.kcls.org';
+var phone_regex = new RegExp(/^\d{3}-\d{3}-\d{4}/);
+var post_regex = new RegExp(/^\d{5}(?:[-\s]\d{4})?$/);
 
 /* show/hide card options depending on the selected type. */
 function show_card_types(type) {
@@ -122,6 +124,7 @@ function validate(dom_id) {
             if (value) {
                 delete invalid_fields[dom_id];
             } else {
+                valid = false;
                 invalid_fields[dom_id] = "Please enter an address street";
             }
             break;
@@ -130,15 +133,27 @@ function validate(dom_id) {
             if (value) {
                 delete invalid_fields[dom_id];
             } else {
+                valid = false;
                 invalid_fields[dom_id] = "Please enter an address city";
             }
             break;
 
         case 'stgba.post_code':
-            if (value) {
+            if (value && value.match(post_regex)) {
                 delete invalid_fields[dom_id];
             } else {
-                invalid_fields[dom_id] = "Please enter an address zip/post code";
+                valid = false;
+                invalid_fields[dom_id] = "Please enter a valid zip/post code";
+            }
+            break;
+
+        case 'stgu.day_phone':
+            if (!value || value.match(phone_regex)) {
+                delete invalid_fields[dom_id];
+            } else {
+                valid = false;
+                invalid_fields[dom_id] = 
+                    "Please use phone number format XXX-YYY-ZZZZ";
             }
             break;