0

これで、ユーザーがフォームの状態フィールドに状態の省略形以外のものを入力できないようにするスクリプトができました。ギデオンに感謝します

スクリプトを少し変更して、無効な状態に入ったときのアラートメッセージを含めました。しかし、私はそれが本当に好きではありません。ページの上部またはフィールドのすぐ下で点滅するアラートバーを探します。間違った略語を入力すると自動的に表示され、ユーザーの注意を引くために点滅し、数秒後に消えます。どんなアイデアや考えでも大歓迎です!私は提案を非常に受け入れています!もう一度ありがとう!

私はあなたたちが私を理解していないと思い始めています。これは私が持っているコードです:

<script>
                        function validateState(el) {
                        //put all states in this array. 
                        var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
                    "FL","GA","GU","HI","IA",
                    "ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
                    "NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
                    "SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
                        for(var i=0;i< states.length;i++) {
                          if(el.value.toUpperCase() == states[i]) {
                            return true;
                          }
                        }
                        //clear element if it doesn't match a state
                        el.value = ""; //you could maybe do something else here.
                        alert('Invalid State Abbreviation, You must fix this before continuing')
                        document.getElementById("state").focus();
                        return false;
                    }
                    </script>

ステートメントがfalseを返した場合、画面全体にバーを実行させたいと思っています。

4

3 に答える 3

3

ユーザーのビューの上に配置される要素を簡単に作成できます(上:-100pxなど)。無効な状態に入ると、jQueryのようなライブラリを使用して、それを最上位0にアニメーション化できます。setInterval()内の単純な条件ステートメントを使用してフラッシュさせることができます。

jQueryを使用するかどうかはわかりませんが、使用する場合、コードは次のようになります。

//if the input is not what you expect..
if(input != state){
    //drop the bar down
    $("#bar").animate({
            top: 0
    }, 1500);//drop it in 1500 milliseconds.
    //this is a lot like a loop that runs every 400 milliseconds.. 
    setInterval(function () {  <-------------------------------| 
        if ($("#bar").css("display") == 'none') {              |
            //if the bar is HIDDEN show it..                   |
            $("#bar").show();                                  |  
        } else {                                               | 
            //else hide it.                                    | 
            $("#bar").hide();                                  |
        }                                                      |
    }, 400);//<< EVERY 400 milli-seconds go here >-------------^
}

もちろん、これは単なる例であり、従来のJavaScriptに簡単に戻すことができます。

jsFiddleをチェックしてください。

これがあなたが探しているものであることを願っています。

于 2013-02-04T03:17:11.460 に答える
1

@Shawnのコードを適応させると、バーを表示および非表示にする関数が必要になります。バーを点滅させるコードを削除しました。

function ShowError(txt)
{
  $("#bar").show();
  $("#bar").text(txt);
  $("#bar").animate({
      top: 0
  }, 1500);
}
function ClearError()
{
   $("#bar").hide();
}

その後、あなたはただするでしょう:

if(el.value.toUpperCase() == states[i]) {
     ClearError();
     return true;
} else {
      ShowError("Please Enter a valid state");
}

ここで実行されているコード全体を参照してください:http://jsfiddle.net/grFT7/8/


ある時点でバーを非表示にするには、次のようにします。

 setInterval(function () { $("#bar").hide(); }, 5000);
                           //hide the bar every 5 secs (5000 milliseconds).   
于 2013-02-04T05:14:59.370 に答える
0

BootStrapのアラートを使用します。使いやすく、かっこいいです。

于 2013-02-04T04:24:00.550 に答える