I'm working on a web form where I wish to (after form submission) highlight those input fields that weren't entered correctly.

The highlight effect I wish to create is an endlessly looping animation between background-color: #fcc; and #fff; in the faulty input fields, using jQuery. When one of those fields gain focus, I wish to stop the animation of that field.

I'm fairly off-beat in jQuery and JS, so if anyone could point me in the right direction, I'd be sincerely grateful.

I'm working on a web form where I wish to (after form submission) highlight those input fields that weren't entered correctly.

The highlight effect I wish to create is an endlessly looping animation between background-color: #fcc; and #fff; in the faulty input fields, using jQuery. When one of those fields gain focus, I wish to stop the animation of that field.

I'm fairly off-beat in jQuery and JS, so if anyone could point me in the right direction, I'd be sincerely grateful.

• javascript
• jquery
• loops
• jquery-animate

4 Answers 4

Check out these two jQuery plugins:

Pulse: http://james.padolsey./javascript/simple-pulse-plugin-for-jquery/

Seek Attention: http://enhance.qd-creative.co.uk/demo/seekAttention/ (link now dead)

I think Pulse is what you were asking for, but Seek Attention could be useful in some cases as well.

Here is a very rudimentary sample I created using the pulse plug in.

<script src="http://ajax.googleapis./ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://enhance.qd-creative.co.uk/demos/pulse/pulse.jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    function doSomething() {
        if ($('.BadTextBox').val() == "") {
            $('.BadTextBox').pulse({ backgroundColors: ['#fcc', '#fff'] });
        }
        else {
            $('.BadTextBox').css({'background-color': '#fff'}).stop();
        }

    }
</script>

<input type="text" class="BadTextBox" onblur="doSomething();" />

When the user navigates away from the text box it starts pulsing if empty. If they go back and fill it out, it stops pulsing.

I did something similar

Firstly create the javascript function variable

var PulsePut = function (){

    if ($(this).val() == "") {
        $(this).pulse({ backgroundColors: ['#ffffee', '#fff'] });
    }
    else {
        $(this).css({'background-color': '#fff'}).stop();
    } }

Then add a class to the inputs

<input type="text" class="PulsePut" />

Finally, to initialise the function

$(document).ready(function(){

$('.PulsePut').blur(PulsePut); }

This will make any input you have with the class .PulsePut pulse if empty.

here's how i would do it (general steps):

1. loop through inputs, add class "incorrect" to those fields
2. while looping, toggle bg of "incorrect" classes, sleep for however long
3. on click of input, remove it's "incorrect" class.

this may not work if in the while loop, nothing else is executable. post fixes in the ments.

I would capture the onblur event and trigger a function to validate the input:

function matchShippingEmail() {
$('#shippingEmail').css('border',validColor);
if ($('#shippingEmail').val() == '') {
    $('#shippingEmailLabel').html('email');
    return 0;
}
if ($('#shippingEmail').val().match(RegExp('^([a-zA-Z0-9._%%-]+@+[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})'))) {
    $('#shippingEmailLabel').html('email');
    return 1;
} else {
    $('#shippingEmail').css('border',invalidColor);
    $('#shippingEmailLabel').html(email error');
    return 0;
}

}

On form submission, I did this:

$(document).ready(function() {
$('.confirmOrder').click(function(event){
    if (!matchCardOwnerName())        {$('#cardOwnerName').css('border',invalidColor);        $('#cardOwnerName').focus();        return false;}
    if (!matchCardNumber())            {$('#cardNumber').css('border',invalidColor);            $('#cardNumber').focus();            return false;}
    if (!matchCVV2Code())             {$('#CVV2Code').css('border',invalidColor);                $('#CVV2Code').focus();                return false;}
    if (!matchCardOwnerId())        {$('#cardOwnerId').css('border',invalidColor);            $('#cardOwnerId').focus();            return false;}
    if (!matchShippingFullName())    {$('#shippingFullName').css('border',invalidColor);        $('#shippingFullName').focus();        return false;}
    if (!matchShippingAddress())    {$('#shippingAddress').css('border',invalidColor);        $('#shippingAddress').focus();        return false;}
    if (!matchShippingCity())        {$('#shippingCity').css('border',invalidColor);            $('#shippingCity').focus();            return false;}
    if (!matchShippingZipCode())    {$('#shippingZipCode').css('border',invalidColor);        $('#shippingZipCode').focus();        return false;}
    if (!matchShippingEmail())         {$('#shippingEmail').css('border',invalidColor);        $('#shippingEmail').focus();        return false;}
    if (!matchShippingPhoneNumber()){$('#shippingPhoneNumber').css('border',invalidColor);    $('#shippingPhoneNumber').focus();    return false;}
    if (!$('#agreeToTermsAndConditions').attr('checked')) {
        $('#agreeToTermsAndConditionsDiv').css('color','#FF0000');
        $('#agreeToTermsAndConditionsDiv').css('font-weight','bold');
        $('#agreeToTermsAndConditionsDiv').css('font','150%% ariel');
        return false;
    }
    $('html').css('cursor','wait');
    $('.confirmOrder').css('cursor','wait');
    $('#confirmOrderButton').attr('src','images/confirmOrderDisabled.jpg');
    $('#paymentForm').submit();
    //document.paymentForm.submit();
    $('form').get(0).setAttribute('action', '#'); //this works

    return true;
});

});