Animation sans fin de couleur de fond dans jQuery, comment?

Question

Je travaille sur un formulaire Web où je souhaite (après la soumission du formulaire) mettre en évidence les champs de saisie qui n'ont pas été saisis correctement.

L'effet de surbrillance que je souhaite créer est une animation sans fin en boucle entre background-color: #fcc; et #fff; dans les champs d'entrée défectueux, en utilisant jQuery. Lorsque l'un de ces champs est activé, je souhaite arrêter l'animation de ce champ. Je suis assez décalé dans jQuery et JS, donc si quelqu'un pouvait me diriger dans la bonne direction, je serais sincèrement reconnaissant.

Answer 1

Découvrez ces deux plugins jQuery:

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

Faire appel à un: http://enhance.qd-creative.co.uk/demo/seekAttention/ (lien mort maintenant)

Je pense que Pulse est ce que vous demandez, mais L'attention peut également être utile dans certains cas.

Voici un échantillon très rudimentaire j'ai créé en utilisant la prise d'impulsion.

<script src="http://ajax.googleapis.com/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();" /> 

Lorsque l'utilisateur quitte la zone de texte, il commence Impulsions si vide. Si elles reviennent et le remplissent, il cesse de pulser.

Answer 2

est ici comment je le ferais (étapes générales):

boucle
1. à travers les entrées, ajouter la classe « incorrecte » à ces champs
2. en boucle, bascule bg des classes « incorrectes », le sommeil pour cependant long
3. au clic de l'entrée, supprimez sa classe "incorrecte".

cela peut ne pas fonctionner si dans la boucle while, rien d'autre n'est exécutable. publier des corrections dans les commentaires.

Answer 3

Je l'ai fait quelque chose de similaire

Tout d'abord créer la fonction javascript variables

var PulsePut = function(){ 

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

ajouter ensuite une classe aux entrées

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

Enfin, pour initialiser la fonction

$(document).ready(function(){ 

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

Cela rendra toute entrée que vous avez avec la pouls de la classe .PulsePut si elle est vide.

Answer 4

Je capturer l'événement onblur et déclencher une fonction pour valider l'entrée:

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; 
} 

}

Sur présentation de forme, je l'ai fait:

$(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; 
}); 

});