Blink the inputs of the form on server error

Question

I have a form I am posting on server and if server respond with any errors I want slowly blink the inputs of the form (submits and textareas).

I was trying to do something like that:

JS:

 $(':input','#myForm').not(':button, :submit, :reset, :hidden').fadeOut(550, function(){
   $(':input','#myForm').not(':button, :submit, :reset, :hidden').toggleClass("blink-class").fadeIn(550);             
});

CSS:

.blink-class { border: 1px solid #ee1b1b !important; }

But it is just removed inputs from the form instead of blinking. Basically I just want to blink the red border around the inputs but in a nice way.

Is there any ways of doing this?

You only want to blink the border without hiding the content? Is that what you mean? — Split Your Infinity, Dec 28 '13 at 01:01

Arun P Johny · Answer 1 · 2013-12-28T00:54:33.847

1

You need

$('button').click(function () {
    var $els = $(':input', '#myForm').not(':button, :submit, :reset, :hidden');
    $els.fadeOut(550).promise().done(function () {
        $els.toggleClass("blink-class").fadeIn(550);
    });
})

Demo: Fiddle

Why? The :hidden selector will cause your selector to ignore the elements whose display is set to none by the fadeOut. Also the fadeOut handler is executed multiple time(one time for each input element selected by your selector)

The solution is to cache the elements that are fadeOut(), then fadeIn() them inside a promise().done() handler - it is because we need to display all the input elements at once when all the elements are faded out

edited Dec 28 '13 at 00:54

answered Dec 28 '13 at 00:49

Arun P Johny

384,651
66
527
531

In the demo elements disparaging and then appearing, Is it possible to do the same but without elements disappearing? – Sergino Dec 28 '13 at 01:02
I mean by clicking the button the input should flash with a red border(border slowly gets red color and than red color slowly disparaging) but in your sample the input disparaging, if you add values to the inputs you will see it more clearly. I want just to blink the border without hiding the content. – Sergino Dec 28 '13 at 01:30
heh great, but how to add `css` class insteard of adding just `border`? – Sergino Dec 28 '13 at 03:12
@sreginogemoh try http://jsfiddle.net/arunpjohny/fa3cJ/7/ but for both these samples to work you need to use jQuery UI – Arun P Johny Dec 28 '13 at 03:16
There is no way to add class when using `animate` function? Because then it is not animated it is looks wired. – Sergino Dec 28 '13 at 03:21
@sreginogemoh no... animate function does not accept class as a parameter – Arun P Johny Dec 28 '13 at 03:22
http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery do you have any idea how function `getClassContent` could looks like? – Sergino Dec 28 '13 at 03:25
@sreginogemoh in that case the OP was asking whether such a method exists... but AFAIK it does not exists... but you can have a look at http://stackoverflow.com/questions/16965515/how-to-get-a-style-attribute-from-a-css-class-by-javascript-jquery or http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript – Arun P Johny Dec 28 '13 at 03:30

nzn · Answer 2 · 2013-12-28T00:59:24.313

1

try this:

var t = null;

function blink() {
    var obj = $('input[type="text"]')
    obj.addClass("blink-class");
    t = setTimeout(function () {
        obj.removeClass("blink-class");
        t = setTimeout(function () {
            blink();
        }, 550);
    }, 550);
}

demo

edited Dec 28 '13 at 00:59

answered Dec 28 '13 at 00:50

nzn

828
5
12

score 0 · Answer 3 · answered Dec 28 '13 at 01:03

You can use animate function

$(':input','#myForm').not(':button, :submit, :reset, :hidden').animate({borderColor: "#FF0000"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250)
    .animate({borderColor: "#FF0000"}, 250)
    .animate({borderColor: "#000000"}, 250);

FIDDLE

Blink the inputs of the form on server error

3 Answers3