highlight for input on errors

diff --git a/application/controllers/AccountController.php b/application/controllers/AccountController.php
index 97f9fbc649d6a1250981ec3f502c1f50b7a49d6b..00de24e14940b121fbea0ec7529e00443696673f 100644 (file)
--- a/application/controllers/AccountController.php
+++ b/application/controllers/AccountController.php
@@ -8,6 +8,7 @@ class AccountController extends Zend_Controller_Action
     public function init() {
         $this->view->headScript()->appendFile('js/prototype.js');
         $this->view->headScript()->appendFile('js/forms.js');
+        $this->view->headScript()->appendFile('js/highlight.js');
         $this->view->headScript()->appendFile('js/account.js');
         $this->view->headLink()->appendStylesheet('css/generic.css');
         $this->view->headLink()->appendStylesheet('css/account.css');

diff --git a/application/controllers/ContactController.php b/application/controllers/ContactController.php
index 0b71c325151f1647fc54106708af28bca7144e49..03dd4a6b645436290fcf7fbc60c2dbb5c7d9edc6 100644 (file)
--- a/application/controllers/ContactController.php
+++ b/application/controllers/ContactController.php
@@ -8,6 +8,7 @@ class ContactController extends Zend_Controller_Action
     public function init() {
         $this->view->headScript()->appendFile('js/prototype.js');
         $this->view->headScript()->appendFile('js/forms.js');
+        $this->view->headScript()->appendFile('js/highlight.js');
         $this->view->headScript()->appendFile('js/contact.js');
         $this->view->headLink()->appendStylesheet('css/generic.css');
         $this->view->headLink()->appendStylesheet('css/contact.css');

diff --git a/application/controllers/IdxController.php b/application/controllers/IdxController.php
index 589c71b49390d59d7d3068c912bbeb209aa8ed13..1e149fd429949f0c7a06f4ec9b314c99e408d2e1 100644 (file)
--- a/application/controllers/IdxController.php
+++ b/application/controllers/IdxController.php
@@ -11,6 +11,7 @@ class IdxController extends Zend_Controller_Action
         $this->view->headScript()->appendFile('js/prototype.js');
         $this->view->headScript()->appendFile('js/simplebox.js');
         $this->view->headScript()->appendFile('js/closebtn.js');
+        $this->view->headScript()->appendFile('js/highlight.js');
         $this->view->headScript()->appendFile('js/deck.js');
         $this->view->headScript()->appendFile('js/ajaxize.js');
         $this->view->headScript()->appendFile('js/message.js');

diff --git a/application/controllers/LoginController.php b/application/controllers/LoginController.php
index 96d485a02d4a94b264f2ccca11ce96f9916d93c0..07bb40b874b484c90a20e239eb0b59ccf7127210 100644 (file)
--- a/application/controllers/LoginController.php
+++ b/application/controllers/LoginController.php
@@ -8,6 +8,7 @@ class LoginController extends Zend_Controller_Action
         $this->view->headTitle($this->view->translate("login"));
         $this->view->headScript()->appendFile('js/prototype.js');
         $this->view->headScript()->appendFile('js/forms.js');
+        $this->view->headScript()->appendFile('js/highlight.js');
         $this->view->headScript()->appendFile('js/login.js');
         $this->view->headLink()->appendStylesheet('css/generic.css');
         $this->view->headLink()->appendStylesheet('css/login.css');

diff --git a/application/controllers/NewpwdController.php b/application/controllers/NewpwdController.php
index 2dc2724f8116ec7de20743012631589491555a43..5facb89771110c78a40a6712c28fe8108ee089fc 100644 (file)
--- a/application/controllers/NewpwdController.php
+++ b/application/controllers/NewpwdController.php
@@ -8,6 +8,7 @@ class NewpwdController extends Zend_Controller_Action
     public function init() {
         $this->view->headScript()->appendFile('js/prototype.js');
         $this->view->headScript()->appendFile('js/newpwd.js');
+        $this->view->headScript()->appendFile('js/highlight.js');
         $this->view->headLink()->appendStylesheet('css/generic.css');
         $this->view->headLink()->appendStylesheet('css/newpwd.css');
     }

diff --git a/public/css/generic.css b/public/css/generic.css
index 466d059c7e52d178ca3c974255b9c1edc0323f40..6b166ab9a0043ff9a5c2bf94f6a88a47cf3e3a60 100644 (file)
--- a/public/css/generic.css
+++ b/public/css/generic.css
@@ -56,6 +56,12 @@ label {
     vertical-align: top;
 }
 
+input {
+    /* transitions for highlight effects */
+    -webkit-transition: background-color 0.3s ease-out;
+    -moz-transition: background-color 0.3s ease-out;
+}
+
 /*
  * footer
  */

diff --git a/public/js/account.js b/public/js/account.js
index f6e204a29339816e71bc80565bcd17cea1052f51..ae4e3ecc213e5645bbddc22aac5a2b8379933864 100644 (file)
--- a/public/js/account.js
+++ b/public/js/account.js
@@ -30,7 +30,7 @@ document.observe("dom:loaded", function() {
 
         if (!errorElements.length) {
             control = $("account_password");
-            if (control.check(function() {
+            if (!control.check(function() {
                 return this.value === $("account_password_confirm").value;
             }, SyjStrings.passwordNoMatchWarn)) {
                 errorElements.push(control);
@@ -50,7 +50,7 @@ document.observe("dom:loaded", function() {
          * if there are errors, cancel submission
          */
         if (errorElements.length) {
-            errorElements[0].focus();
+            errorElements[0].highlight('#F08080').focus();
             errorElements[0].select();
             evt.stop();
         }

diff --git a/public/js/contact.js b/public/js/contact.js
index 2f47875e5c74193cb32cbef8bf950eaf4d07c072..1213e6eb5e9c7ef9f04eb11db339a8a5eb3aef39 100644 (file)
--- a/public/js/contact.js
+++ b/public/js/contact.js
@@ -30,7 +30,7 @@ document.observe("dom:loaded", function() {
          * if there are errors, cancel submission
          */
         if (errorElements.length) {
-            errorElements[0].focus();
+            errorElements[0].highlight('#F08080').focus();
             errorElements[0].select();
             evt.stop();
         }

diff --git a/public/js/forms.js b/public/js/forms.js
index b96fe20e78af9a0d73ef13f1bd2f8ec55424ce15..9c84d5b0581e0a3097ee9ef48cc69068ef058c40 100644 (file)
--- a/public/js/forms.js
+++ b/public/js/forms.js
@@ -12,6 +12,9 @@ Element.addMethods('form', {
             tofocus = form.down('input:not([readonly],[disabled]),textarea:not([readonly][disabled])');
         }
         if (tofocus) {
+            if (error && (typeof tofocus.highlight == "function")) {
+                tofocus.highlight('#F08080');
+            }
             tofocus.focus();
             tofocus.select();
         }
@@ -23,8 +26,6 @@ Element.addMethods(['input', 'textarea'], {
         if (callback.call(control)) {
             return true;
         }
-        control.focus();
-        control.select();
         control.insert({
             after: new Element("div", {className: 'error'}).update(errorMessage)
         });

diff --git a/public/js/highlight.js b/public/js/highlight.js
new file mode 100644 (file)
index 0000000..289cd2a
--- /dev/null
+++ b/public/js/highlight.js
@@ -0,0 +1,12 @@
+Element.addMethods({
+    highlight: function(element, color, timeout) {
+        var current;
+        if (typeof timeout === "undefined") {
+            timeout = 0.3;
+        }
+        current = element.getStyle('backgroundColor');
+        Element.setStyle(element, {'backgroundColor': color});
+        Element.setStyle.delay(timeout, element, {'backgroundColor': current});
+        return element;
+    }
+});

diff --git a/public/js/login.js b/public/js/login.js
index 44d8e080734c868b8a02137aed5658e94f105ed3..2721840d638d3a17177744ad7300db42c1f37c67 100644 (file)
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -6,9 +6,12 @@ document.observe("dom:loaded", function() {
     form.focus();
 
     form.observe("submit", function(evt) {
+        var loginput = $("login_user");
         $$('.error').invoke('remove');
 
-        if (!$("login_user").check(function() { return !this.value.strip().empty(); }, SyjStrings.userEmptyWarn)) {
+        if (!loginput.check(function() { return !this.value.strip().empty(); }, SyjStrings.userEmptyWarn)) {
+            loginput.highlight('#F08080').focus();
+            loginput.select();
             evt.stop();
             return;
         }

diff --git a/public/js/newpwd.js b/public/js/newpwd.js
index 5dc898fb9ba5389fa2a8fa17cef2496d0f00daf0..02f402385bf0f3c4ad3b03f4513f4f453474f208 100644 (file)
--- a/public/js/newpwd.js
+++ b/public/js/newpwd.js
@@ -24,7 +24,7 @@ document.observe("dom:loaded", function() {
         $$('.error').invoke('remove');
         if ($('newpwd_email').value.strip().empty()) {
             insertErrorBefore($('newpwdform').select('table')[0], SyjStrings.notEmptyField);
-            $('newpwd_email').focus();
+            $('newpwd_email').highlight('#F08080').focus();
             $('newpwd_email').select();
             evt.stop();
         }

diff --git a/public/js/syj.js b/public/js/syj.js
index 670b64c47cbed7f66688279355746472f91b6e3d..efff5ea89325c840aed04f7f4888e88453e572a9 100644 (file)
--- a/public/js/syj.js
+++ b/public/js/syj.js
@@ -491,7 +491,7 @@ var SYJModalClass = Class.create({
     checkNotEmpty: function(input, message) {
         if ($(input).value.strip().empty()) {
             this.messenger.setMessage(message, "warn");
-            $(input).focus();
+            $(input).highlight('#F08080').focus();
             return false;
         }
         return true;
@@ -543,7 +543,7 @@ var SYJModalClass = Class.create({
 
         this.messenger.setMessage(message, "error");
         input = this.area.select('input[type="text"]')[0];
-        input.focus();
+        input.highlight('#F08080').focus();
         input.select();
     },
 
@@ -595,7 +595,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
 
         if (!($("user_pseudo").value.match(/[a-zA-Z0-9_.]+$/))) {
             this.messenger.setMessage(SyjStrings.invalidPseudo, "warn");
-            $("user_pseudo").focus();
+            $("user_pseudo").highlight('#F08080').focus();
             $("user_pseudo").select();
             return false;
         }
@@ -606,14 +606,14 @@ var SYJUserClass = Class.create(SYJModalClass, {
 
         if ($("user_password").value.length < 6) {
             $("user_password-desc").setMessageStatus("warn");
-            $("user_password").focus();
+            $("user_password").highlight('#F08080').focus();
             $("user_password").select();
             return false;
         }
 
         if ($("user_password").value !== $("user_password_confirm").value) {
             this.messenger.setMessage(SyjStrings.passwordNoMatchWarn, "warn");
-            $("user_password").focus();
+            $("user_password").highlight('#F08080').focus();
             $("user_password").select();
             return false;
         }
@@ -624,7 +624,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
 
         if (!$("user_accept").checked) {
             this.messenger.setMessage(SyjStrings.acceptTermsofuseWarn, "warn");
-            $("user_accept").focus();
+            $("user_accept").highlight('#F08080').focus();
             return false;
         }
 
@@ -676,7 +676,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
         if (message) {
             this.messenger.setMessage(message, "error");
             if (focusInput) {
-                focusInput.focus();
+                focusInput.highlight('#F08080').focus();
                 focusInput.select();
             }
             return;
@@ -737,7 +737,7 @@ var SYJLoginClass = Class.create(SYJModalClass, {
         if (message) {
             this.messenger.setMessage(message, "error");
             if (focusInput) {
-                focusInput.focus();
+                focusInput.highlight('#F08080').focus();
                 focusInput.select();
             }
             return;