3

（フォームの送信後に）正しく入力されなかった入力フィールドを強調表示したいWebフォームに取り組んでいます。

私が作成したいハイライト効果は、background-color: #fcc;の間で無限にループするアニメーションです。および#fff; jQueryを使用して、障害のある入力フィールドで。それらのフィールドの1つにフォーカスが移ったら、そのフィールドのアニメーションを停止したいと思います。

私はjQueryとJSでかなり風変わりなので、誰かが私を正しい方向に向けることができれば、心から感謝します。

4

4 に答える 4

11

次の 2 つの jQuery プラグインを確認してください。

パルス: http://james.padolsey.com/javascript/simple-pulse-plugin-for-jquery/

注意を引く: http://enhance.qd-creative.co.uk/demo/seekAttention/ (リンクは現在無効)

Pulse はあなたが求めていたものだと思いますが、Seek Attention が役立つ場合もあります。

これは、pulse プラグインを使用して作成した非常に初歩的なサンプルです。

<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();" />

ユーザーがテキスト ボックスから移動すると、空の場合はパルスが開始されます。彼らが戻って記入すると、脈動が止まります。

于 2009-02-22T06:20:58.907 に答える
1

私は似たようなことをしました

最初にJavaScript関数変数を作成します

var PulsePut = function (){

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

次に、入力にクラスを追加します

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

最後に、関数を初期化します

$(document).ready(function(){

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

これにより、空の場合、クラス .PulsePut パルスでの入力が行われます。

于 2009-03-30T03:57:21.010 に答える
0

これが私がそれを行う方法です（一般的な手順）：

  1. 入力をループし、それらのフィールドにクラス「不正」を追加します
  2. ループ中に、「正しくない」クラスのバックグラウンドを切り替え、どれだけ長くスリープしても
  3. 入力をクリックすると、「正しくない」クラスを削除します。

while ループ内で他に何も実行できない場合、これは機能しない可能性があります。コメントに修正を投稿してください。

于 2009-02-22T05:44:50.147 に答える
0

onblur イベントをキャプチャし、関数をトリガーして入力を検証します。

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

}

フォームの送信時に、私はこれを行いました：

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

});

于 2011-10-29T09:46:49.953 に答える