From: arno Date: Wed, 28 Jul 2010 10:32:43 +0000 (+0200) Subject: highlight for input on errors X-Git-Tag: v0.2~87 X-Git-Url: https://dev.renevier.net/?p=syj.git;a=commitdiff_plain;h=9efd079d59d269811abc4c551b2f39ab2e6a05fb highlight for input on errors --- diff --git a/application/controllers/AccountController.php b/application/controllers/AccountController.php index 97f9fbc..00de24e 100644 --- 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 0b71c32..03dd4a6 100644 --- 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 589c71b..1e149fd 100644 --- 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 96d485a..07bb40b 100644 --- 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 2dc2724..5facb89 100644 --- 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 466d059..6b166ab 100644 --- 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 f6e204a..ae4e3ec 100644 --- 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 2f47875..1213e6e 100644 --- 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 b96fe20..9c84d5b 100644 --- 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 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 44d8e08..2721840 100644 --- 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 5dc898f..02f4023 100644 --- 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 670b64c..efff5ea 100644 --- 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;